对数据库中的数据设置多个过滤器

Question

我正在从数据库中获取数据。

数据的结构如下：

serie
   --- title (string)
   --- category (array)

我使用计算属性制作了搜索过滤器。它看起来像这样：

filteredSeries () {
  return this.series.filter(serie => {
    return serie.title.toLowerCase().match(this.search.toLowerCase())
  })
}

我正在循环播放这样的系列：

<v-flex xs12 sm4 md3 lg2 v-for="serie in filteredSeries" :key="serie.title" pa-3>

.....

</v-flex>

搜索词是从这里得到的：

<v-text-field label="Search" height="35" v-model="search" prepend-inner-icon="search"></v-text-field>

一切都很好，但现在我们正在解决我的问题。我不仅要按标题过滤系列，还要按类别过滤。

我从数组中的数据方法中获取所有类别，如下所示：

data () {
  return {
    series: [],
    search: '',
    categories: [
      'Crime', 'Drama', 'Mistery', 'Comedy', 'Horror', 'Sci-Fi'
    ],
    filterCategory: []
  }
},

过滤器选择填充这样的数据：

<v-select  prepend-inner-icon="category" height="35" v-model="filterCategory" :items="categories" chips label="Category" multiple></v-select>

此选择正在返回 filterCategory 数组。现在我想要的是在 filterCategory 中选择特定类别的系列。我不知道该怎么做。我认为如果按类别过滤可以包含在按搜索词过滤完成的计算属性中，那将是完美的。

欢迎任何帮助如何做到这一点。

Answer 1

您的过滤方法可以修改为也通过filteredCategories进行过滤。

我们可以使用 JavaScript 的 Array.every() 和 Array.includes() 方法来做到这一点。

另外，我会使用String.includes() 而不是String.match()，因为match() 主要用于搜索正则表达式。

filteredSeries () {

  // Filtering by selected categories.
  const filteredSeries = this.series.filter(serie => {
    return this.filteredCategories.every(category => {
      return serie.categories.includes(category);
    });
  });

  // Further filtering by search word.
  return filteredSeries.filter(serie => {
      return serie.title.toLowerCase().includes(this.search.toLowerCase()));
  });
}