We can create a search filter with Vue.js to let us add search functionality to our app.
In this article, we’ll look at how to add a search filter to our Vue app.
Computed Properties
We can create a computed property that watches reactive properties and return a value derived from them.
For instance, we can write:
<template>
<div id="app">
<p>original message: "{{ message }}"</p>
<p>reversed message: "{{ reversedMessage }}"</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: "Hello"
};
},
computed: {
reversedMessage() {
return this.message
.split("")
.reverse()
.join("");
}
}
};
</script>
to create the reversedMessage computed property to reverse the this.message string and return it.
Then we can use it in the template like a regular reactive property.
A computed property function must be synchronous so that it returns a value.
Computed properties are useful because they don’t update until the reactive properties update.
Also, the returned value is cached when they don’t need to update unnecessarily.
This is very handy for creating search filters since the filter only updates when we update the search term.
Creating a Search Filter
We can create a search filter with it by using computed properties.
To do that, we write:
<template>
<div id="app">
<input v-model="searchQuery">
<div v-for="r of resultQuery" :key="r.id">{{r.title}}</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
searchQuery: null,
resources: [
{ id: 1, title: "javascript for dummies" },
{ id: 2, title: "vue for dummies" },
{ id: 3, title: "dos for dummies" },
{ id: 4, title: "windows for dummies" },
{ id: 5, title: "html for dummies" }
]
};
},
computed: {
resultQuery() {
if (this.searchQuery) {
return this.resources.filter(item => {
return this.searchQuery
.toLowerCase()
.split(" ")
.every(v => item.title.toLowerCase().includes(v));
});
} else {
return this.resources;
}
}
}
};
</script>
We have the resources array that has all the array items we can search for.
Also, we have the resultQuery computed property to do the search.
We call filter on this.resources is this.searchQuery isn’t an empty string.
In the filter callback, we split the searchQuery string and check if the title has the parts of the searchQuery string.
Otherwise, we return the this.resources array.
In the template, we have the input box to let us search for the items.
It binds to this.searchQuery , so the resultQuery will be computed.
We loop through the resultQuery array and display so that we display the filtered results.
The key prop is required so that the items displayed properly.
Therefore, when we type something into the input box, we’ll see the filtered results updated automatically.
Conclusion
We can add our own search filter easily with Vue.js computed properties.
