Custom Filter using VueJS
Tags: vue, javascript, codenewbie, beginners
Published: 2021-11-07 17:13:28

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

{% user snehalkadwe %}

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

```javascript
<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**.

```javascript
<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: "john@xyz.com" },
        { id: 2, name: "lee min", email: "leemin@xyz.com" },
        { id: 3, name: "alexa", email: "alexa@xyz.com" },
        { id: 4, name: "rosy", email: "rosy@xyz.com" },
        { id: 5, name: "joy", email: "joy@xyz.com" },
        { id: 6, name: "john", email: "john@vue.com" },
      ],
    };
  },
  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**

```css
<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.

{% codesandbox custom-filter-using-vue-js-bmh0q %}

:heart: :unicorn: Happy Reading.... :heart: :unicorn: