Search filter in Vue JS / Nuxt JS

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())
        );
      });
    }
  }