[Vuejs]-Chaining Filters Vue.js

by

2👍

✅

As per our discussion in the comments about chaining the filter calls here is an example of how you would do that.

    filterSearch() {
       return this.products
                  .filter(product => product.topic.toLowerCase().match(this.search.toLowerCase()))
                  .filter(product => product.price < checkbox.Value)
    }
👤Adam H

1👍

as the comments say, multiple chained filters will work. Since your letting the user filter dynamically based on check boxes you could do something like:

computed: {
  filteredSearch() {
      return this.products.filter((p) => {
        if (this.ltTenFilterApplied) {
          return p.value < 10;
        } else {
          return true;
        }
      })
      .filter(// filter based on btwnTwentyAndFiftyFilterApplied the same way )
      .fitler((filteredP) => {
        if (this.tagsToFilterBy && this.tagsToFilterBy.length > 0) {
          return this.tagsToFilterBy.includes(filteredP.categoryTagName);
        } esle {
          return true;
        }
      });
    }
},
data() {
  return {
    ltTenFilterApplied: false,
    btwnTwentyAndFiftyFilterApplied: false,
    topicsToFilterBy: [],
    products: [// things here],
  };
},
methods: {
  addTopicsFilter(aFilterFromClickEvent) {
    this.topicsToFilterBy.push(aFilterFromClickEvent);
  },
  removeTopicFilter(bFilterFromClickEvent) {
    this.topicsToFilterBy = this.topicsToFilterBy.filter(bFilterFroMClickEvent);
  }
}
👤person13

Leave a comment