Custom Filter using VueJS

Hello Readers,

In this blog post we are going to see how can we create custom filter component using VueJS. We can reuse this filter whenever we need it in our overall project. This can be very useful for filtering result as required.

So let us start to code custom filter.

Before going further follow me for more updates

Snehal Rajeev MoonFollow

Full Stack Developer by profession, mostly works in Laravel | Vue JS | PHP | Javascript | InertiaJS | Node | Express.

First we will create a FilterComponent.vue file in Components folder (goto src\components) and add the below code.

<template>
  <div>
    <input
      type="text"
      :value="value"
      @input="$emit('input', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  name: "FilterComponent",
  props: {
    value: String,
  },
};
</script>

In above code we will bind the entered input value to the value, this value is defined as prop which is of type string, and emit the input event.

Now go to the file where you want to use this custom FilterComponent and add the below code. I am going to add it in App.vue.

<template>
  <div id="app">
    <div class="text-left">
      <h3>Cutsom Filter using VueJs</h3>
      <FilterComponent v-model="search" />
      <ul v-for="user in searchResult" :key="user.id">
        <li>{{ user.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import FilterComponent from "./components/FilterComponent";

export default {
  name: "App",
  components: {
    FilterComponent,
  },
  data() {
    return {
      search: null,
      users: [
        { id: 1, name: "john", email: "[e-mail]" },
        { id: 2, name: "lee min", email: "[e-mail]" },
        { id: 3, name: "alexa", email: "[e-mail]" },
        { id: 4, name: "rosy", email: "[e-mail]" },
        { id: 5, name: "joy", email: "[e-mail]" },
        { id: 6, name: "john", email: "[e-mail]" },
      ],
    };
  },
  computed: {
    searchResult() {
      if (this.search) {
        return this.users.filter((item) => {
          return this.search
            .toLowerCase()
            .split(" ")
            .every((v) => item.name.toLowerCase().includes(v));
        });
      } else {
        return this.users;
      }
    },
  },
};
</script>

In the above code we have imported FilterComponent and assigned a v-model="search" to search/filter the result.

We will define the search/filter result in computed property and return the result.

The searchResult() method will return the result. It will check if the search has value or not. If it has value then it will apply the filter on users and return the matched value from the users array, if the search is empty it will return complete users array.

Add the css after the script tag in App.vue

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.text-left {
  text-align: left;
}
input {
  padding: 7px;
  border-radius: 4px;
  border: 1px solid gray;
  box-shadow: 7px 7px 19px -6px rgba(0, 0, 0, 0.72);
  -webkit-box-shadow: 7px 7px 19px -6px rgba(0, 0, 0, 0.72);
  -moz-box-shadow: 7px 7px 19px -6px rgba(0, 0, 0, 0.72);
}
</style>

You can also refer the below codesandbox for filter result and for better understanding.

❤️ 🦄 Happy Reading.... ❤️ 🦄