[英]How to filter array of objects by applying multiple filters from checkboxes?
我会尽量简单地描述它。
有一个 App 组件,我从 JSON 接收数据并将其放入flightList 。
然后我想通过FlightOptions和Airlines组件中的复选框过滤这个数组数据。
问题是我不明白如何同时应用多个过滤器。
<template>
<div id="app">
<div class="filters">
<FlightOptions @clicked="onCheckboxClick" />
<Airlines v-bind:airlinesList="airlinesList" />
</div>
<div class="flightsList">
<FlightsList v-bind:flightsList="filteredFlightsList" />
</div>
</div>
</template>
export default {
name: "App",
components: {
FlightOptions,
Airlines,
FlightsList,
},
data() {
return {
flightsList: [],
airlinesList: {},
optionsFilters: [],
};
},
mounted() {
this.getFlightsList();
},
methods: {
onCheckboxClick(value) {
this.optionsFilters = value;
console.log(value);
},
getFlightsList() {
fetch("results.json")
.then((res) => res.json())
.then((data) => {
this.airlinesList = data.airlines;
this.flightsList = data.flights;
})
.catch((err) => console.error("Error", err));
},
},
computed: {
// I tried many ways to filter, but it does not word with multiple conditions
}
};
------------ FlightOptions -------------
<template>
<div class="options">
<p class="options__title">Опции тарифа</p>
<div class="options__checkbox">
<input v-model="optionsFilters" value="onlyDirect" type="checkbox" id="onlyDirect" />
<label for="onlyDirect">Только прямые</label>
</div>
<div class="options__checkbox">
<input v-model="optionsFilters" value="withBaggage" type="checkbox" id="withBaggage" />
<label for="withBaggage">Только с багажом</label>
</div>
<div class="options__checkbox">
<input v-model="optionsFilters" value="onlyReturn" type="checkbox" id="onlyReturn" />
<label for="onlyReturn">Только возвратные</label>
</div>
</div>
</template>
<script>
export default {
data() {
return {
optionsFilters: []
}
},
watch: {
optionsFilters: function() {
this.$emit('clicked', this.optionsFilters)
}
}
}
</script>
尝试这个:
computed: {
filteredFlightsList() {
if (!optionsFilters.length) return this.flightsList;
return this.flightsList.filter((item) => {
return this.optionsFilters.every((option) => item[option]);
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.