[Vuejs]-How create multiple store filter in VueJS?

by

1👍

✅

You can’t return twice from the same function. Either chain the conditions using && or chain in another call to filter.

You’re also misusing match. The argument needs to be a RegExp or something that can safely be converted to a RegExp. You can see the problem in the console if you type in a character like [ that has a special meaning in a RegExp. Perhaps you meant includes?

The second condition also seems to be incorrect. Not entirely clear what that combination of match and includes is trying to achieve but I think you’re looking for something like this:

return this.products.filter((product) => {
    return product.title.toLowerCase().includes(this.search.toLowerCase()) &&
      this.getBrand.includes(product.brand)
})

It is worth noting that while both conditions are using a method called includes they are two different methods, one on a string and the other on an array.

This also seems to be wrong:

v-bind:value="brand"

brand is an array of strings and you aren’t looping over them with a v-for. Change it to value="Apple" and value="Samsung" instead, ensuring the case matches the data.

I also suggest removing v-on:click="filtered". Not sure what that’s trying to do but it seems to be treating a computed property as a click listener.

👤skirtle

Leave a comment