[Vuejs]-Filter vue.js checkbox

by

0👍

✅

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

Leave a comment