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

So basically the user can select multiple panies 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 pany 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>',
                'pany': '1',
                'sub_category': '2',
                'created': '<some_big_date>',
                'views': '10000'
                }
            ]

My processFilter method:

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

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() pany and this.filtersComp and yes they are not undefined and have values in them as you can see in the following image:

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

So basically the user can select multiple panies 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 pany 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>',
                'pany': '1',
                'sub_category': '2',
                'created': '<some_big_date>',
                'views': '10000'
                }
            ]

My processFilter method:

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

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() pany and this.filtersComp and yes they are not undefined and have values in them as you can see in the following image:

• javascript
• vue.js

1 Answer 1

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(pany)
  );

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(pany)
    //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.pany.includes(pany)
   });

But this does not make much sense because the result of this.data.includes(subCategory) && this.data.includes(pany) 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.