Filter vue.js checkbox

Question

It's my first project on vue.js and a have a problem. I create a filter for products. Filter work only with <input type="text" v-model="search" /> , but with checkbox don't work. Please help.

Here's my code,

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

https://jsfiddle.net/Lygeces4/

Answer 1

You'd better handle your search with 2 lists. One for countries and one for brends:

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

Then, update your v-model with : <input type="checkbox" v-model="search.countries" and v-model="search.brends" . This way, you'll have country names in search.countries and brend name in search.brends .

Finally, you can implement the filter function this way (or another, as you wish your filters worked):

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;
    });
  }
}