Vue.js 2.0에서 둘 이상의 선택 목록 필터링

Question

Vue 2.0에서는 더 이상 목록에 여러 파이프 라인 필터를 연결할 수 없기 때문에 (|filterBy 등), 계산 된 속성에서이 작업을 수행하는 방법은 무엇입니까? 둘 이상의 선택 드롭 다운?

앨범 제목 (선택 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> 

뷰 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 "추천 및 'filterByYear` 통해 v-for 런 "예를 들면)? 또는 하나의 거대한 계산 된 속성에서 모든 결과를 필터링하는 방법을 알아야합니까?

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);  
     }); 
    } 
}