使用Vuejs按多个类别筛选记录

Question

我想在Vuejs中按多个类别过滤JSON数据。我使用Vue 3和collect.js。

模板:

<select v-model="selectedCategory" multiple>
<option :value="null">Choose category</option>
<option v-for="category in categories" :key="category.id" :value="category">{{ category.name }}</option>
</select>
<div v-for="project in filteredProjects" :key="project.id">
<h6>{{ project.name }}</h6>
<small>{{ project.category.name }}</small>
</div>

脚本:

import collect from "collect.js";
export default {
data() {
return {
projects: [{id: 1, name: "Lorem ipsum", category: {id: 1, name: "Website"}}, {id: 2, name: "Sit amet", category: {id: 2, name: "App"}}],
categories: [{id: 1, name: "Website"}, {id: 2, name: "App"}],
selectedCategory: null,
};
},
computed: {
filteredProjects() {
let projects = this.projects;
if (this.selectedCategory != null) {
projects = projects.filter((project) => {
return collect(project.category).contains("id", this.selectedCategory.id);
});
}
return projects;
},
},
};

有什么建议吗?

更新:一个项目也可以有多个类别，像这样:

...
projects: [{id: 3, name: "Lorem ipsum dolor", category: {id: 1, name: "Website"},{id: 2, name: "App"}}],
...

Answer 1

找到解决方案:

this.selectedCategory.filter((category) => {
projects = projects.filter((project) => {
return collect(project.software).contains(
"id",
category.id
);
});
});