CODEWITHSUNDEEP
htmlvue.js
Calv
Calv

Reputation: 125

Chaining Filters Vue.js

Basically I want to chain filters.

A search filter
A checkbox styled price filter with pre-defined values e.g < 10$ ,$20 -$50, $50+
A checkbox styled filter for selecting 'topics'
A select styled sort filter 'ascending, descending, highest and lowest price'

I have made a search filter which works but I cannot get my head around making all the filters work together.

I will be grateful for any help I get. :)

Thanks in advance.

JS

    filteredSearch() {
      return this.products.filter(p => p.topic.toLowerCase().match(this.search.toLowerCase()));

    }

HTML

<div class="block" v-for="product in filteredSearch">

Upvotes: 0

Views: 1100

Answers (2)

person13
person13

Reputation: 171

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);
  }
}

Upvotes: 1

Adam H
Adam H

Reputation: 1818

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)
    }

Upvotes: 2

Related Questions