Creating a search box with vue.js

Question

I'm wanting to add functionality for the search box to search the current cards on the page for the movie inputted, but all the other examples and solutions I've found online their solutions don't seem to work for me.

This is the body of the HTML:

<body>
  <div id="app">
    <div class="row pt-3">
      <div class="col">
        <input type="text" class="form-control" v-model="search" placeholder="Search Movies">
      </div>
      <div class="col-md-auto">
        <button type="button" class="btn btn-primary" id="search">&nbsp;&nbsp; Go! &nbsp;&nbsp;</button>
      </div>
    </div>
      <div class="row text-center pt-3">
        <div v-for="movie in movies" class="card" style="width: 18rem;">
          <img :src="movie.Poster" class="card-img-top" alt="img">
          <div class="card-body">
            <h5 class="card-title">{{ movie.Title }}</h5>
            <p class="card-text">{{ movie.Year }}</p>
            <a href="#" class="btn btn-primary">View Movie</a>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>

And this the JS file:

new Vue({
  el: '#app',
  data: {
    movies: [],
    search: '',
  },
  created() {
    var vm = this
    axios.get('https://www.omdbapi.com/?s=Harry+Potter&apikey=a9018efb')
      .then(function(response) {
        vm.movies = response.data.Search
      })
  }
})

Dan · Accepted Answer · 2020-12-11 21:54:39Z

2

Instead of looping over movies, create a computed set of filtered data to loop over. For example, if you were searching the titles:

computed: {
   searchedMovies() {
      return this.movies.filter(movie => {
        return movie.Title.toLowerCase().includes(this.search.toLowerCase());
      })
   }
}

Loop over this:

<div v-for="movie in searchedMovies" :key="movie.Title">
...
</div>

When you haven't searched for anything, this will return all movies.

edited Dec 11, 2020 at 21:54

answered Dec 11, 2020 at 21:43

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Speeed Over a year ago

I got it to work with the button from your answer, thank you though this helped a lot ;)

Collectives™ on Stack Overflow

Creating a search box with vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related