How to Filter list from multiple select options (dropdowns) using Vuejs

Question

I need to figure out the filter function that will accomplish the filtering of a list of objects based on the selection from multiple dropdown's. If nothing is selected in the dropdown, it shouldn't filter on any of those values.

I have setup a fiddle which lays out a mock structure but need help writing the javascript function(s) to filter the list in realtime when an option is selected from dropdown.

Here is example structure: https://jsfiddle.net/5k4ptmqg/751/

<div id="app">
  <select v-model="type">
    <option value="type1">Type 1</option>
    <option value="type2">Type 2</option>
  </select>

  <select v-model="size">
    <option value="size1">Size 1</option>
    <option value="size2">Size 2</option>
  </select>

  <ul>
    <li v-for="item in items">
      <span>{{ item.name }}</span>
      <span>{{ item.type }}</span>
      <span>{{ item.size }}</span>
    </li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    items: [
    {
      name: 'name1',
      type: 'type1',
      size: 'size1'
    },
    {
      name: 'name2',
      type: 'type2',
      size: 'size2'
    },
    {
      name: 'name3',
      type: 'type1',
      size: 'size1'
    },
    {
      name: 'name4',
      type: 'type2',
      size: 'size2'
    }
    ]
  }
})

Answer 1

Some issues you had:

1. v-model="type"/"size" is wrong, it should bind with selectedType/Size. v-model for <select> means the current data for this Dom, not the data of its children.

2. Create one computed, return filtered result instead of v-for="item in items"

After fixed them, the codes will be like below:

 new Vue({ el: '#app', data: { selectedType: '', selectedSize: '', items: [ { name: 'name1', type: 'type1', size: 'size1' }, { name: 'name2', type: 'type2', size: 'size2' }, { name: 'name3', type: 'type1', size: 'size1' }, { name: 'name4', type: 'type2', size: 'size2' } ] }, computed: { computed_items: function () { let filterType= this.selectedType, filterSize = this.selectedSize return this.items.filter(function(item){ let filtered = true if(filterType && filterType.length > 0){ filtered = item.type == filterType } if(filtered){ if(filterSize && filterSize.length > 0){ filtered = item.size == filterSize } } return filtered }) } } })

 <script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script> <div id="app"> <select v-model="selectedType"> <option value="type1">Type 1</option> <option value="type2">Type 2</option> </select> <select v-model="selectedSize"> <option value="size1">Size 1</option> <option value="size2">Size 2</option> </select> <ul> <li v-for="item in computed_items"> <span>{{ item.name }}</span> <span>{{ item.type }}</span> <span>{{ item.size }}</span> </li> </ul> </div>