[Vuejs]-VueJS 2.x Table with Multiple ComboBox Filter

by

0👍

The best way to filter your data is to use computed properties, because this is what they are meant to do.

so for your select options:

<select v-model="filter">
    <option value="5">5</option>
    <option value="10">10</option>
</select>

your table:

<table>
   <tbody>
      <tr v-for="(item, index) in getFilteredItems> {{ item }} </tr>
   </tbody>
</table>

you script:

data: {
    items : [5,10,15,20,25],
    filter : 0
  },
  computed : {
      getFilteredItems() {
          return this.items.filter(item => // apply the filter according to this.filter);
      }
  }

Your computed will be called each time this.filter will change, or when this.items will change.
You can read more about computed properties in vue docs computed properties

Of course you need to apply your own code here, this is just an example.

-1👍

First of all bind your selects to some variables using v-model and listen for change event. For Example :

<select v-model="filter" @change="applyFilter">
    <option value="5">5</option>
    <option value="10">10</option>
</select>

You gonna need another list to store filtered items and a method to apply filter.

  data: {
    items : [5,10,15,20,25],
    filteredItems : [],
    filter : 0
  },
  methods : {
      applyFilter (){
          this.filteredItems = this.items.filter(item => item > this.test);
      }
  }

This is a very basic implementation with a single filter. But you can add as many as you want. Edit the filter method with given filters. Add same change event to all select elements. (Since you said that you need multiple filters)

Leave a comment