在Vue.js 2.0中按两个或多个选择过滤列表 [英] Filtering list by two or more selects in Vue.js 2.0

问题描述

因为在Vue 2.0中你不能再将多个管道过滤器链接到一个列表（ | filterBy 等），你应该如何在计算属性中执行此操作你有两个或更多选择下拉菜单？

Since in Vue 2.0 you can no longer chain together multiple pipeline filters to a list (|filterBy etc), how are you supposed to do this in a computed property if you have two or more select dropdowns?

我希望能够按专辑标题（从选择1）和年份（选择2）排序。

I want the ability to sort by album title (from select 1) and by year (select 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：

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

pressEntries 数据模型从API获取数据，我没有打扰包括代码。每个选择过滤器的每个代码块都可以单独使用，但不能一起使用。

The pressEntries data model gets data from an API, which I didn't bother including the code for. Each block of code for each select filter works on their own, but not together.

如果 filterByAlbum 中的 v-for 循环引用计算属性，然后返回 pressEntries 数据模型，是否可以有两个计算属性 v-for 运行（例如 filterByAlbum 和'filterByYear`例如）？或者我是否需要弄清楚如何在一个大型计算属性中过滤所有结果？

If the filterByAlbum in the v-for loop refers to the computed property, which then refers back to pressEntries data model, would it be possible to have two computed properties that the v-for runs through (like "filterByAlbum" and "'filterByYear`" for example)? Or do I need to figure out how to filter all the results in one massive computed property?

推荐答案

这是一个例子计算，这将工作。您也可以将 albumFilter 和 yearFilter 移动到他们自己的方法中。基本上使用这种技术，您可以根据需要组合多个过滤器。

Here is an example of a computed that would work. You could move albumFilter and yearFilter into their own methods as well. Essentially using this kind of technique, you could assemble as many filters together as you wanted.

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

我不得不猜测你的数据结构，但这里有一个工作示例。

I had to guess at your data structure, but here is a working example.

这篇关于在Vue.js 2.0中按两个或多个选择过滤列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！