Vue.js 2.0에서 목록을 2개 이상 필터링하여 선택

Vue.js 2.0에서 목록을 2개 이상 필터링하여 선택

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>

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에서 데이터를 가져오는데, 이 API에 대한 코드를 포함시키지 않았습니다.각 선택 필터의 각 코드 블록은 개별적으로 동작하지만 함께 동작하지는 않습니다.

이 경우,filterByAlbum에서v-for루프는 계산된 속성을 참조하고 있습니다.이 속성은 다음에 다시 참조됩니다.pressEntries데이터 모델, 두 개의 계산 속성을 갖는 것이 가능할까?v-for(「」와 같이)를 통과합니다.filterByAlbum" 및 "filterBy"예를 들어 year'는?아니면 하나의 거대한 컴퓨터 속성에서 모든 결과를 필터링하는 방법을 찾아야 합니까?

여기 동작하는 계산의 예가 있습니다.움직일 수 있다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
  }
})

데이터 구조를 추측해야 했습니다만, 여기 작업 예가 있습니다.

제 솔루션은 다음과 같습니다.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);     
        });
    }
}

언급URL : https://stackoverflow.com/questions/42683926/filtering-list-by-two-or-more-selects-in-vue-js-2-0