Отфильтруйте элементы списка, используя флажок в vue - PullRequest
Новая
       5

Отфильтруйте элементы списка, используя флажок в vue

0 голосов
/ 28 октября 2018

У меня есть несколько простых элементов списка и панель фильтров 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>

Панель фильтров состоит из: input[type="radio"] и input[type="checkbox"].Фильтр по имени и цене.

Фильтр по имени для переключателей работает.Я не могу получить selected для флажков и отфильтровать элементы по значению цены.

Вопрос: как использовать радио и флажки для фильтрации списка элементов?Как отфильтровать цену с помощью флажков?

1 Ответ

0 голосов
/ 28 октября 2018

Вы не использовали выбранное значение флажка в функции фильтра.Вы можете использовать: 

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