Filter the list items using checkbox in vue

Question

I have a some simple list items and filter panel codesandbox:

<template>
  <div id="filter">
    <h1>Filter List</h1>

    <div class="filter-panel">
      <ul class="filter-list">
        <li :key="index" v-for="(ch, index) in checkboxOptions">
          <label>
            <input 
              type="checkbox" 
              v-model="ch.selected" 
               :value="ch.value">
            <span> {{ ch.text }} </span>
          </label>
        </li>
      </ul>
      <hr>
      <ul class="filter-list">
        <li :key="index" v-for="(r, index) in radioOptions">
          <label>
            <input 
              type="radio" 
              v-model="selected" 
               :value="r.value">
            <span> {{ r.text }}</span>
          </label>
        </li>
      </ul>
    </div>


    <transition-group name="fade" mode="out-in" tag="ul" class="catalog-list">
      <li :key="index" v-for="(item, index) in filterItems">
        <h3>{{ item.name }}</h3>
        <span>{{ item.price }}</span>
      </li>
    </transition-group>

  </div>
</template>

---

<script>

export default {
  name: "FilterList",
  data() {
    return {
      items: [
        { name: "Name 1", price: "200" },
        { name: "Name 2", price: "100" },
        { name: "Name 3", price: "5" }
      ],
      selected: "all",
      radioOptions: [
        { text: 'All', value: 'all' },
        { text: 'Filter Name 1', value: 'Name 1' },
        { text: 'Filter Name 2', value: 'Name 2' },
        { text: 'Filter Name 3', value: 'Name 3' }
      ],
      checkboxOptions: [
        { text: 'Filter 200', value: '200', selected: false },
        { text: 'Filter 100', value: '100', selected: false },
        { text: 'Filter 5', value: '5', selected: false }
      ]
    };
  },
  computed: {
    filterItems() {
      var vm = this,
          name = vm.selected;

          //console.log(vm.checkboxOptions.value);

      if(name === "all"){
        return vm.items;
       } else {
         return this.items.filter(function(n){
          return n.name === name;
        });
       }      
    }
  }
};
</script>

Filter panel consist: input[type="radio"] and input[type="checkbox"]. Filter by name and price.

Filter by name for radio buttons works. I can not get selected for checkbox and filter items by price value.

Question: how to use radio & checkbox input to filter the items list? How to filter price using checkboxes?

Answer 1

You didn't use selected checkbox value in the filter function. You can use:

  computed: {
    filterItems() {
      var vm = this,
          name = vm.selected;

          console.log(name);
      var currentItems = vm.items;
      if (name !== 'all') {
         currentItems = currentItems.filter(function(n){
          return n.name === name;
        });
      }
      vm.checkboxOptions.forEach(option => {
        if (option.selected) {
          currentItems = currentItems.filter(item => item.price === option.value)
        }
      })
      return currentItems;      
    }
  }