javascript - 在 Vue.js 2.0 中按两个或多个选择过滤列表

Question

因为在 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 获取数据，我没有为它添加代码。每个选择过滤器的每个代码块都单独工作，但不能一起工作。

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

Answer 1

这是一个可以工作的计算示例。您也可以将 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
  }
})

我不得不猜测你的数据结构，但这是一个 working example .