vue snippet

Vue Snippets – Search List Filter


Filters are part of many applications as it helps the user sort through a wide range of items. We can use the combination of v-model and computed properties to achieve this.

<template>
  <div>
    <p>{{ filteredList }}</p>
    <input v-model="text">
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      list: ["John", "Jane", "Doe"]
    };
  },
  computed: {
    filteredList() {
      return this.list.filter(str => str.toLowerCase().includes(this.text.toLowerCase()));
    }
  }
};
</script>

In the snippet above, we have a list of items and an input field. As you type into the input field, the list gets updated with items that include the value of the input field.

This is possible through computed properties. We have one filteredList which gets updated anytime the text data property is updated. text is bound to the input field using v-model so basically, the list is updated when a new value is entered into the input field.

Use Cases

  • Ecommerce application
  • Book library

Share on social media

//