Javascript 在Vue.js 2.0中通过两个或多个选择筛选列表

由于在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>

pressEntries数据模型从一个API获取数据，我没有费心包括它的代码。每个select筛选器的每个代码块各自工作，但不能一起工作

---

如果v-for循环中的filterByAlbum引用了computed属性，然后又引用了pressEntries数据模型，那么v-for是否可能运行两个计算属性，例如filterByAlbum和filterByYear？或者我需要弄清楚如何在一个大规模计算属性中过滤所有结果吗？

这里是一个可以工作的计算属性的示例。您也可以将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个选择框

---

您好，如果我想计算显示项目。怎么做？如果我想数一数展品，谢谢。怎么做？Thanks@KemBardly你的意思是你想数一数从过滤器中出来的项目吗？是的，我想分页请帮忙

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

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