Vue.js - Filter multiple fields - vue.js

Question

I'm trying to filter a on a nested array inside an array of objects in an Vue.js. Here's a snippet of the component code:
filteredProducts: function() {
if (!this.filters.appointments.length && !this.filters.powers.length && !this.filters.materials.length && !this.filters.lamps.length) return this.products;
return this.products.filter(product => {
return product.filter(p => {
let filteredAppointments = this.filters.appointments ? _.difference(this.filters.appointments, p.appointment.split(',')).length === 0 : true,
filteredPowers = this.filters.powers ? this.filters.powers.includes(p.total_power_lamps) : true,
filteredMaterials = this.filters.materials ? this.filters.materials.includes(p.material) : true,
filteredLamps = this.filters.lamps ? this.filters.lamps.includes(p.count_lamps) : true,
filteredPrice = p.price >= this.rangePrice[0] && p.price <= this.rangePrice[1];
return filteredAppointments && filteredPowers && filteredMaterials && filteredLamps && filteredPrice;
}).length > 0;
});
}
How do I display only the filters that are used ? For example, if only one filter is selected, then no other filters are needed. Also, if several are selected, it should filter by both.

Answer 1

I think this is what you're looking for
filteredProducts () {
let results = this.products
if(this.filters.appointments.length) {
results = results.filter(logicFilterHere)
}
if(this.filters.powers.length) {
results = results.filter(logicFilterHere)
}
if(this.filters.materials.length) {
results = results.filter(logicFilterHere)
}
return results
}