Trying to filter multiple values inside of multiple arrays - Vue

Question

What’s wrong with my search function? It works for the first line (city values), but not for the others. If I remove everything but the cityValues line, or change the && to ||, the function works, but not like this.

I’m trying to search through an array of parameters on each value. Meaning: the user has the possibility to select multiple options from multiple dropdowns, and see the results.

For some context, cityValue, zipValue etc are arrays. cityValue is an array of strings, and the rest are arrays of numbers.

Thanks

   computed: {
            filteredPropertyTypes() {
                return this.propertyTypes.filter(rental => {
                    return this.cityValue.indexOf(rental.city) !== -1 &&
                        this.zipValue.toString().indexOf(rental.zip.toString()) !== -1  &&
                        this.bedroomsValue.toString().indexOf(rental.bedrooms.toString()) !== -1 &&
                        this.bathroomsValue.toString().indexOf(rental.bathrooms.toString()) !== -1 &&
                        rental.rent.toString().includes(this.rentValue.toString());
                })
            }
        },

Tony · Accepted Answer · 2020-07-24 21:35:20Z

1

According to MDN, The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

arr.indexOf(searchElement[, fromIndex])

The indexOf() method works on Arrays and looking at your function, you are using strings as your array.

For more on the indexOf() method, check here

EDIT -- based on the additional information, if cityValue, zipValue etc are arrays originally, using the toString() method on them causes them to become strings

Try changing your code to

computed: {
  filteredPropertyTypes() {
    return this.propertyTypes.filter(rental => {
      return this.cityValue.indexOf(rental.city.toString()) !== -1 &&
        this.zipValue.indexOf(rental.zip) !== -1  &&
        this.bedroomsValue.indexOf(rental.bedrooms) !== -1 && this.bathroomsValue.indexOf(rental.bathrooms) !== -1 && rental.rent.includes(this.rentValue);
    })
 }
},

edited Jul 24, 2020 at 21:35

answered Jul 24, 2020 at 20:29

Tony

1,4423 gold badges11 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Trying to filter multiple values inside of multiple arrays - Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related