.includes() with .filter() in vue.js

user_12576581 0
Viewed 5970

So I'm trying to make a filtering method inside vue and one of the rules it has is to filter objects that their company id is in a the filtering list.

So basically the user can select multiple companies and vue will create a list for example [1,5,2,6] then this list gets parsed to the processFilter() method and it is supposed to now filter the products array to only have the products that their company id is in the list created by vue.

Product array example:

[
                {
                'id': 1,
                'name': 'Prod1',
                'min_price': '1',
                'max_price': '2',
                'currency': 'EUR',
                'image': '<Some_big_url>',
                'company': '1',
                'sub_category': '2',
                'created': '<some_big_date>',
                'views': '10000'
                }
            ]

My processFilter method:

processFilter() {
      const subCategory = this.filtersSub;
      const company = this.filtersComp;
      const sortBy = this.filtersSort;
      this.filtered = this.products.filter(
        this.data.includes(subCategory) && this.data.includes(company)
      );
    },

After testing this function method it returns the following in the console:

vue.runtime.esm.js:1888 TypeError: Cannot read property 'includes' of undefined
    at a.processFilter (category.vue:227)
    at submit (category.vue?c00e:1)
    at ne (vue.runtime.esm.js:1854)
    at HTMLFormElement.n (vue.runtime.esm.js:2179)
    at HTMLFormElement.Ji.o._wrapper (vue.runtime.esm.js:6917)

Is there a way to make this work or should I do it in a different way?

Before anyone asks yes I console.log() company and this.filtersComp and yes they are not undefined and have values in them as you can see in the following image:

enter image description here

vue.js javascript
1 Answers

I don't how the logic inside your filter should work, but filter accepts a callback function, and you are passing just a bool here:

  this.filtered = this.products.filter(
    this.data.includes(subCategory) && this.data.includes(company)
  );

you can change it like:

  this.filtered = this.products.filter( product => {
    //if you console log here, product will be printed as many times as the
    //lenght of this.products applying the boolean
    console.log(product)

    //return this.data.includes(subCategory) && this.data.includes(company)
    //this will alway return the same value (true or false)
    //probably you want to use the product in your logic
    return product.sub_category.includes(subCategory) && product.company.includes(company)
   });

But this does not make much sense because the result of this.data.includes(subCategory) && this.data.includes(company) will always be the same at each iteration, resulting in all the elements being filtered, or not. Most probably you need to use the product to actually filter you array.

user_76290200
Related