Suppose you have this list:
<template> <div> <h1>Avengers </h1> <ul> <li v-for="(hero, index) in heroes" :key="index"> {{hero}} </li> </ul> </div> </template> <script> export default { name: "App" data(){ heroes: ["Ironman", "Capitan America", "Hulk", "Thor", "Black Widow"] } } </script> And then you wanted to add a search filter, so when you type in input field, it'll show matching heroes.
<template> <div> <h1>Avengers </h1> <input type="text" placeholder="Search Heroes" /> <ul> <li v-for="(hero, index) in heroes" :key="index"> {{hero}} </li> </ul> </div> </template> <script> export default { name: "App" data(){ heroes: ["Ironman", "Capitan America", "Hulk", "Thor", "Black Widow"] } } </script> You can use computed properties for that.
But What exactly are Computed Properties?
Computed properties enable you to create a property that can be used to modify, manipulate, and display data within your components in a readable and efficient manner.
Second thing is computed properties are cached based on their dependencies means it'll only re-evaluate when some of its dependencies changed.
In code below, I have created a computed property heroList and have added term as a dependency, so when term is changed, heroList will be re-evaluated and rendered.
That means, When you type in input field, it'll change term value and re-render the list.
Type in input -> term value change -> heroList re-evaluated -> render heroList
<template> <div> <h1>Avengers </h1> <input type="text" placeholder="Search Hero's" v-model="term"/> <ul> <li v-for="(hero, index) in heroList" :key="index"> {{hero}} </li> </ul> </div> </template> <script> export default { name: "App" data(){ heroes: ["Ironman", "Capitan America", "Hulk", "Thor", "Black Widow"], term : "" }, computed: { // filtered list of heroes heroList(){ return this.heroes.filter(hero => { return hero.indexOf(this.term) !== -1 }) } } } </script> Thanks for reading.
Top comments (0)