Javascript 使用vue.js创建搜索框_Javascript_Html_Vue.js

Javascript 使用vue.js创建搜索框

javascript html vue.js

Javascript 使用vue.js创建搜索框,javascript,html,vue.js,Javascript,Html,Vue.js,我想为搜索框添加功能，在页面上搜索当前卡片以查找输入的电影，但是我在网上找到的所有其他示例和解决方案，它们的解决方案似乎对我不起作用这是HTML的主体： <body> <div id="app"> <div class="row pt-3"> <div class="col"> <input type="text" cla

我想为搜索框添加功能，在页面上搜索当前卡片以查找输入的电影，但是我在网上找到的所有其他示例和解决方案，它们的解决方案似乎对我不起作用

这是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/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>

不要循环播放

电影

，而是创建一组经过过滤的计算数据进行循环播放。例如，如果您正在搜索标题：

计算：{
搜索视频（）{
返回此.movies.filter（电影=>{
return movie.Title.toLowerCase（）.includes（this.search.toLowerCase（））；
})
}
}

在此循环：

...

当您没有搜索任何内容时，这将返回所有电影。

我使用您答案中的按钮获得了它，谢谢您，尽管这很有帮助；）

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