Vue.js - Filter multiple fields

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.

Is it a computed property? With your case I think it's best to use computed property — Nafiul Islam
– Nafiul Islam, Commented Sep 1, 2020 at 21:03

Babacar C. DIA · Accepted Answer · 2020-09-02 01:38:11Z

3

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
}

answered Sep 2, 2020 at 1:38

Babacar C. DIA

4403 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js - Filter multiple fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related