VueJS2テーブル：フィルタを追加する方法

Question

次のようなものをlinkのように使用して、アキシャルを使用してvue内にテーブルを設定しようとしています。

フィルタと検索バーを追加するにはどうすればよいですか？私はv-for="post in posts | filterBy searchを追加することができないようです。ここで、検索は<input>のvモデルです。私はこれがvuejs2で利用できないという文書を見ました。 v-forディレクティブの代わりに、<table>タグで、vuejs2でfilterByをサポートする他のディレクティブを使用できますか？

• 私はAxiosで使用できる別の指令がありますか？
• 残りのAPIから構造体jsonを取得した場合、どうすればvue2-bootstrap-table2のようなものを使用し、jsonを解析することで値を追加できますか？

Answer 1

v-for複数の項目を表示するために使用するディレクティブです。また、フィルタに使用するsearchは、vue.jsによってdataとみなされ、そのようなデータが変更されるたびに、vue.jsが応答をトリガします。

computedプロパティは、検索クエリが変更されると更新されます。

また

computed: { 
    filteredList: function() { 
     return this.list.filter(function(){ 
     //select only what matches filter 
     }); 
    } 
    } 

、例えばあなたは、非同期関数呼び出しからフィルタされたリストを取得し、リモートAPIを言う、vue.jsプロパティwatchersを提供する場合。コンポーネントがすでにボンネットの下にそれを使用して、以来、実際には、これは、リモート・データでVueBootstrapTableを使用するには正確にどのようVueBootstrapTable implements the filter

watch : { 
    filterKey: function() { 
    // filter was updated, so resetting to page 1 
    this.page = 1; 
    this.processFilter(); 
    }, 
    ... 
} 

である、あなたは直接axiosする必要はありません。ただし、次に

<vue-bootstrap-table :ajax="ajax" .... 

のようなあなたのコンポーネント宣言でAjaxの設定を参照して、あなたの data財産

ajax: { 
    enabled: true, 
    url: "http://localhost:9430/data/test", 
    method: "GET", 
    delegate: false, 
    axiosConfig: {} 
}, 

にこれを追加することで、リモート・データをフェッチするように設定する必要があります