Есть некий список и фильтр этого списка 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
с использованием чекбоксов?