Chaining Filters Vue.js

Question

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">

Just keep chaining filter methods. this.products.filter([search filter]).filter([checkbox filter]) ... Then implement a custom sort method that takes your sort filter into account. — Adam H
– Adam H, Commented Nov 20, 2019 at 19:21
Yuppers, a computed property is just a fancy term for a function. You can do whatever you want inside that function and just return the value. Ok maybe not anything, anything in a promise or async would break it but outside of that anything you want. — Adam H
– Adam H, Commented Nov 20, 2019 at 19:31
filteredSearch: function() { return this.products .filter(function(product) { return product.topic.toLowerCase().match(this.search.toLowerCase()) }) I tried this, but it stopped working completely. What am I doing wrong? — Calv
– Calv, Commented Nov 20, 2019 at 19:45
There is some confusion on how to do this so I will throw together a quick example as an answer so I can post a code snippet. — Adam H
– Adam H, Commented Nov 20, 2019 at 19:46

Adam H · Accepted Answer · 2019-11-20 19:51:14Z

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

answered Nov 20, 2019 at 19:51

Adam H

1,8261 gold badge11 silver badges26 bronze badges

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

2 Comments

Calv Over a year ago

Thanks Adam this works. I'm guessing checkbox.Value is bind by using v-model?

Adam H Over a year ago

Well checkbox.Value is just a placeholder indicating that you would need to get the value of that checkbox there.

person13 · Accepted Answer · 2019-11-20 20:07:02Z

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

Collectives™ on Stack Overflow

Chaining Filters Vue.js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related