Vue Snippets – Search List Filter
Posted on: May 01, 2020 by Kelvin Gobo
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
//