Vue 2.0のv-forディレクティブに複数のフィルタを使用

Question

Vue 1.xのチュートリアルのちょうどちょっと後で、著者はv-forディレクティブで複数のフィルタを使用していました。私の知る限りではofficial documentationから、この構文は、もはやVueの2.0で使用されている

<ul v-for="post in posts | filterBy nameFilter in 'name' | filterBy catFilter in 'cat'"></ul>

は、私が

<ul v-for="post in nameFilter | catFilter"></ul>

私も作成にこのコード行を書き換えてみました2つの計算された関数nameFilterとcateFilterは、名前とカテゴリで投稿を除外します。私のコードは動作しません、それはnameFilter、cateFilterは全く効果がありません最初のフィルタを聴くだけです。

私はVue 2.0で不思議だったので、v-forディレクティブに複数のフィルタを追加することは可能ですか？可能であれば、構文を助言してもらえますか？

これが不可能な場合、その単一の関数ですべてのフィルタロジックを実行するために、1つのフィルタ関数を作成する必要がありますか？

ありがとうございます。

Answer 1

は基本的に、我々は唯一例えば、v-forディレクティブのフィルタリングされたデータを返すために、1つの計算機能を必要とするhere

から答えを見つけ

<ul v-for="post in filteredPosts"></ul>

我々は複数追加する場合は、単にその関数内のすべてのあなたのjavascriptのネイティブ.filter機能をチェーンしてデータを返します。私の場合、それはこのようなものになるだろう：

computed: { 
    filteredPost: function() { 
     var self = this 
     return self.posts 
      .filter(function (post) { 
       return post.title.indexOf(self.searchQuery) !== -1; 
      }) 
      .filter(function(post) { 
       return (post.category.includes(self.selectedCategory)) 
      }) 
    } 
} 

self.searchQueryとself.selectedCategoryは私の例では、このVueのインスタンスのためだけのデータプロパティで、キーお持ち帰りは一緒に連鎖する複数の.filter()機能を持つ1つの計算機能です。

希望があれば助かります。