In our Vue page lets create a search field and for loop to iterate over Avenger’s quotes. The demo is available here on stackblitz
<div class="container"> <div class="row mt-3"> <div class="col"> <h1>Avengers Quotes</h1> </div> </div> <div class="row mt-1"> <div class="col"> <input type="search" id="searchAvenger" class="form-control" v-model="search" placeholder="Search Avenger" /> </div> </div> <div class="row mt-2" v-for="avenge in filteredAvenger"> <div class="col-4 text-dark"><h5>{{ avenge.actor }}</h5></div> <div class="col bg-primary text-light">{{ avenge.quote }}</div> </div> </div>
Now lets create a data object to search from and a computed property to filter the object
data: () => ({ search: "", avengers: [ { actor: "Steve Rogers", quote: "Whatever it takes" }, { actor: "Thor", quote: "I am still worthy" }, { actor: "Natasha Romanoff", quote: "I dont judge people by their worst mistakes" }, { actor: "Thanos", quote: "I am… inevitable" } ] }), computed: { filteredAvenger() { return this.avengers.filter(avenge => { return ( avenge.actor.toLowerCase().includes(this.search.toLowerCase()) || avenge.quote.toLowerCase().includes(this.search.toLowerCase()) ); }); } }