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'
    }
    ]
  }
})

Sphinx · Accepted Answer · 2018-03-27 21:00:23Z

Some issues you had:

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.
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/[email protected]/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>

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related