Filtre vue.js checkbox

Question

C'est mon premier projet sur vue.js et j'ai un problème. Je crée un filtre pour les produits. Filtre travail uniquement avec <input type="text" v-model="search" />, mais avec case à cocher ne fonctionne pas. S'il vous plaît aider.

Voici mon code,

<script async src="//jsfiddle.net/Lygeces4/embed/"></script>

https://jsfiddle.net/Lygeces4/

Answer 1

Vous feriez mieux gérer votre recherche avec 2 listes. Un pour les pays et un pour brends:

data: { 
search: { countries: [], brends: [] } 
} 

Ensuite, mettez à jour votre v-model avec: <input type="checkbox" v-model="search.countries" et v-model="search.brends". De cette façon, vous aurez les noms de pays au search.countries et le nom de la famille au search.brends.

Enfin, vous pouvez mettre en œuvre la fonction de filtre de cette façon (ou une autre, comme vous le souhaitez vos filtres de travail):

computed: { 
    filteredItems() { 
    return this.items.filter(item => { 
     if (this.search.countries.length > 0) { 
     return this.search.countries.indexOf(item.country) > -1; 
     } 
     if (this.search.brends.length > 0) { 
     return this.search.brends.indexOf(item.brend) > -1; 
     } 
     return item; 
    }); 
    } 
}