我正在从数据库中获取数据。
数据的结构如下:
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 中选择的特定类别的系列。我不知道该怎么做。我认为,如果按类别过滤可以包含在按搜索词过滤完成的计算属性中,那就完美了。
欢迎任何有关如何完成此操作的帮助。
最佳答案
您的过滤方法可以修改为也按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()));
});
}
关于javascript - 对数据库中的数据设置多个过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57835344/