Sometimes, we want to search a list while typing in textbox Vue.js.
In this article, we’ll look at how to search a list while typing in textbox Vue.js.
How to search a list while typing in textbox Vue.js?
To search a list while typing in textbox Vue.js, we can add a computed property.
For instance, we write
<template>
<div>
<input type="text" v-model="search" />
</div>
</template>
<script>
export default {
data() {
return {
search: "",
customers: [
{
id: "1",
name: "user 1",
profile_pic: "...",
email: "ab@gmail.com",
phone: "5786965906",
unread: "0",
},
{
id: "2",
name: "user 2",
profile_pic: "...",
email: "abcd@gmail.com",
phone: "576676886",
unread: "0",
},
{
id: "3",
name: "user 3",
profile_pic: "...",
email: "test@gmail.com",
phone: "67689696",
unread: "0",
},
{
id: "4",
name: "user 4",
profile_pic: "...",
email: "d@gmail.com",
phone: "576865896",
unread: "0",
},
],
};
},
computed: {
filteredCustomer() {
return this.customers.filter((cust) => {
return cust.name.toLowerCase().includes(self.search.toLowerCase());
});
},
},
};
</script>
to add the filteredCustomer computed property that returns an array of items from this.customers with the name values that includes the search string search.
We bind the search reactive property to the input value with v-model so filteredCustomer is updated as we type.
Conclusion
To search a list while typing in textbox Vue.js, we can add a computed property.
