Let me simplify the description.
Within the App component, I fetch data from a JSON file and store it in the flightsList array.
My goal is to filter this array based on checkboxes selected in the FlightOptions and Airlines components.
The issue that I'm facing is figuring out how to apply multiple filters simultaneously.
<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 have experimented with different filtering approaches, but struggling 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>