Quiero filtrar mis datos JSON por múltiples categorías en Vuejs. Estoy usando Vue 3 y collect.js.
Modelo:
<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>
Guion:
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; }, }, };
¿Alguna sugerencia?
Actualización: un proyecto también puede tener múltiples categorías como esta:
... projects: [{id: 3, name: "Lorem ipsum dolor", category: {id: 1, name: "Website"},{id: 2, name: "App"}}], ...
Encontré una solución:
this.selectedCategory.filter((category) => { projects = projects.filter((project) => { return collect(project.software).contains( "id", category.id ); }); });