Filterliste nach zwei oder mehr wählt in Vue.js 2.0

Question

Da in Vue 2.0 Sie nicht mehr mehrere Pipeline-Filter zu einer Liste (|filterBy usw.) zusammenketten können, wie sollen Sie dies in einer berechneten Eigenschaft tun, wenn Sie haben zwei oder mehr Dropdown-Menüs auswählen?

Ich möchte die Möglichkeit, nach Albumtitel (von Auswahl 1) und nach Jahr (wählen Sie 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 Code:

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

Die pressEntries Datenmodelldaten aus einer API bekommt, die ich nicht die Mühe, den Code auch für. Jeder Codeblock für jeden ausgewählten Filter funktioniert eigenständig, aber nicht zusammen.

Wenn die filterByAlbum im v-for Schleife auf die berechnete Eigenschaft bezieht, die dann zurück zu pressEntries Datenmodell bezieht, wäre es möglich, zwei berechnete Eigenschaften zu haben, dass die v-for durchläuft (wie „filterByAlbum“ und „'filterByYear` " beispielsweise)? Oder muss ich herausfinden, wie man alle Ergebnisse in einer massiven berechneten Eigenschaft filtert?

Answer 1

Hier ist ein Beispiel für eine Berechnung, die funktionieren würde. Sie könnten auch albumFilter und yearFilter in ihre eigenen Methoden verschieben. Im Wesentlichen mit dieser Art von Technik, könnten Sie so viele Filter zusammenstellen, wie Sie wollten.

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

Ich hatte bei der Datenstruktur zu erraten, aber hier ist ein working example.

Answer 2

Dies ist meine Lösung: Sie leicht ein 3 Auswahlbox hinzufügen

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