Vue.js 2.0の2つ以上の選択によるリストのフィルタリング

Question

Vue 2.0では、複数のパイプラインフィルタをリスト（|filterByなど）にチェーン化することはできませんので、計算されたプロパティでどのようにしたらよいでしょうか2つ以上の選択ドロップダウン？

アルバムタイトル（選択1）と年（2を選択）で並べ替える機能が必要です。

<select v-model="albumFilter"> 
    <option value="All">All</option> 
    <option value="Album 1">Album 1</option> 
    <option value="Album 2">Album 2</option> 
    <option value="Album 3">Album 3</option> 
</select> 

<select v-model="yearFilter"> 
    <option value="Year">Year</option> 
    <option value="2017">2017</option> 
    <option value="2016">2016</option> 
    <option value="2015">2015</option> 
</select> 

<ul> 
    <li v-for="review in filterByAlbum" v-if="review.type === 'recordReview'"> 
     <a :href="review.jsonUrl"> 
      [[ review.title ]] 
     </a> 
    </li> 
</ul> 

VueのJSコード：

data() { 
    return { 
     pressEntries: [], 
     albumFilter: 'All', 
     yearFilter: 'Year' 
    } 
}, 

filterByAlbum: function() { 

    // Select 1 (Album Filter) 
    switch (this.albumFilter) { 
     case 'All': 
      return this.pressEntries; 
      break; 

     case 'Neither': 
      return this.pressEntries.filter(entry => { 
       return entry.relatedRecording === null 
      }); 
      break; 

     default: 
      return this.pressEntries.filter(entry => { 
       return entry.relatedRecording === this.albumFilter 
      });  
    } 

    // Select 2 (Year Filter) 
    if (this.yearFilter === 'Year') { 
     return this.pressEntries; 
    } 
    else { 
     return this.pressEntries.filter(entry => { 
      let postDate = new Date(entry.postDate.date); 
      return JSON.stringify(postDate.getFullYear()) === this.yearFilter; 
     }); 
    } 
} 

pressEntriesデータモデルは、私がのためのコードを含む、気にしませんでしたAPIからデータを取得します。各選択フィルタの各コードブロックは、単独で動作しますが、一緒に動作するわけではありません。

v-forループ内filterByAlbum次いでバックpressEntriesデータ・モデルを意味計算プロパティを参照する場合、（「filterByAlbum」等を介してそのv-forラン2計算特性を有することが可能であろうと、「'filterByYear` " 例えば）？または、1つの大規模な計算されたプロパティですべての結果をフィルタリングする方法を理解する必要がありますか？

Answer 1

ここでは動作する計算の例を示します。 albumFilterとyearFilterを独自の方法に移行することもできます。基本的には、この種のテクニックを使用して、必要なだけ多くのフィルターをまとめて組み立てることができます。

function filterByAlbum(){ 

    const albumFilter = entry => 
      (this.albumFilter == 'All') || 
      (this.albumFilter == 'Neither' && !entry.relatedRecording) || 
      (entry.relatedRecording === this.albumFilter); 

    const yearFilter = entry => 
     (this.yearFilter == 'Year') || 
     (new Date(entry.postDate.date).getFullYear() == this.yearFilter); 

    const reducer = (accumulator, entry) => { 
    if (albumFilter(entry) && yearFilter(entry)) 
     accumulator.push(entry); 
    return accumulator; 
    } 

    return this.pressEntries.reduce(reducer, []); 
} 

new Vue({ 
    el: "#app", 
    data() { 
    return { 
     pressEntries, 
     albumFilter: 'All', 
     yearFilter: 'Year' 
    } 
    }, 
    computed:{ 
    filterByAlbum 
    } 
}) 

私はあなたのデータ構造を推測しなければならなかったが、ここworking exampleです。

Answer 2

これは私のソリューションです： 私はショーのアイテムをカウントしたい場合は、簡単に3選択ボックス

https://codepen.io/anon/pen/PjOoEN

function() { 
    var vm = this; 
    var category = vm.selectedCategory; 
    var gender = vm.selectedGender; 

    if(category === "All" && gender === "All") { 
     return vm.people; 
    } else { 
     return vm.people.filter(function(person) { 
      return (category === 'All' || person.category === category) && (gender === 'All' || person.gender === gender);  
     }); 
    } 
}