[Vuejs]-How can I add Vue.js search filter

by

0👍

✅

According to this part of the documentation:

"Computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed."

Which means that, in your case, the filteredList would only change if the this.savedMembers array change.

So, the correct way would be that:

  1. Create another array, let’s assume filteredSavedMembers
  2. You create a method to react whenever the search changes ( i.e <input @change="onSearchChange".../>
  3. In this method, you will assign your filtering to the filteredSavedMembers
  4. And that’s it, now you only have to show your filterd list in the template.

*Obs: to filter by multiple values, you can use the or (||) operator, like this:

const search = this.search.toLowerCase()
this.filteredSavedMembers = this.savedMembers
  .filter(({ firstName, lastName, email }) =>
    firstName.toLowerCase().includes(search) ||
    lastName.toLowerCase().includes(search) ||
    email.toLowerCase().includes(search)
  )

Leave a comment