0

Есть некий список и фильтр этого списка 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;

      var currentItems = vm.items;

      if(name !== "all"){      
        currentItems = currentItems.filter(function(n){
          return n.name === name;
        });
      }     

      vm.checkboxOptions.forEach( function(option) { 
        if (option.selected) {
          currentItems = currentItems.filter(function(m) { 
            return m.price === option.value;
           });
         }
      });

      return currentItems;

    }
  }
};
</script>

Фильтр состоит из радиокнопок и чекбоксов. Фильтрация по имени name и по цене price.

Фильтрация происходит, но нужно чтобы при выборе чекбоксов, например 100 и 200, то пункты списка с 100 и 200 должны оставаться, а не исчезать оба.

Вопрос: как использовать и input[type=radio] и input[type=checkbox] для фильтрации списка, как произвести фильтрация price с использованием чекбоксов?

1 ответ 1

2

Надо следующую часть кода (в нём мы проходим по всем чекбоксам и для каждого чекбокса фильтруем список по этому чекбоксу):

vm.checkboxOptions.forEach( function(option) { 
  if (option.selected) {
    currentItems = currentItems.filter(function(m) { 
      return m.price === option.value;
     });
   }
});

Заменить на код, который будет один раз фильтровать список по условию «значение элемента списка входит в множество значений выделенных чекбоксов»:

const selectedChecboxesValues = vm.checkboxOptions
    .filter(option => option.selected)
    .map(option => option.value)

if (selectedChecboxesValues.length > 0) {
    currentItems = currentItems.filter(item => 
                       selectedChecboxesValues.includes(item.price));
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.