Create a Search Filter with Vue.js

Photo by Richard T on Unsplash

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.