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: "[email protected]",
          phone: "5786965906",
          unread: "0",
        },
        {
          id: "2",
          name: "user 2",
          profile_pic: "...",
          email: "[email protected]",
          phone: "576676886",
          unread: "0",
        },
        {
          id: "3",
          name: "user 3",
          profile_pic: "...",
          email: "[email protected]",
          phone: "67689696",
          unread: "0",
        },
        {
          id: "4",
          name: "user 4",
          profile_pic: "...",
          email: "[email protected]",
          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.