在Vue.js 2.0中过滤两个或两个以上的列表

由于在2.0版本中，您不能再将多个管道过滤器链接到一个列表（|filterBy等），您应该如何在计算属性中执行此操作两个或更多选择下拉菜单？在Vue.js 2.0中过滤两个或两个以上的列表

我想要按照专辑标题（从选择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数据模型，那会是可能有两个计算性能，所述v-for贯穿（如“filterByAlbum”和“'filterByYear` “ 例如）？或者我需要弄清楚如何过滤一个大规模计算属性中的所有结果？

来源

2017-03-08 Ryan

下面是一个计算结果的例子。您也可以将albumFilter和yearFilter移动到他们自己的方法中。基本上使用这种技术，你可以根据需要组装尽可能多的过滤器。我不得不猜测你的数据结构，但这里是一个working example。

来源

2017-03-09 02:47:54 Bert

嗨，如果我要算表演项目。怎么做？谢谢 –

@KemBardly你的意思是你想要计算出来的过滤器的项目？ – Bert

是的，我想做分页请帮忙 –

这是我的解决方案：您可以轻松地添加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);  
     }); 
    } 
}

来源

2017-06-26 21:38:55 Megafry

嗨，如果我想数表演项目。怎么做？谢谢 –

在Vue.js 2.0中过滤两个或两个以上的列表

回答

相关问题