Создание окна поиска с помощью vue.js

Я хочу добавить функциональность для окна поиска для поиска текущих карточек на странице для введенного фильма, но все другие примеры и решения, которые я нашел в Интернете, их решения, похоже, не работают для меня.

Это тело 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>

И это файл JS:

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

javascript html vue.js

11.12.2020 22:20

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

157

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вместо того, чтобы зацикливаться на movies, создайте вычисляемый набор отфильтрованных данных для зацикливания. Например, если вы искали заголовки:

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

Цикл над этим:

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

Если вы ничего не искали, это вернет все фильмы.

Я заставил его работать с кнопкой из вашего ответа, спасибо, хотя это очень помогло;)

— 12.12.2020 01:51

11.12.2020 22:43

Другие вопросы по теме

Как сделать так, чтобы выпадающие списки навигации по вертикали не закрывали другие навигационные ссылки на мобильных устройствах

Плагин Wordpress JS удалить версию

У меня есть условие для добавления отключенного класса в мой div после выбора нескольких флажков, которые равны 5

Кажется, я не могу понять, как остановить мою html-форму от разделения и смещения вниз при изменении размера страницы

Получение элемента таблицы JavaScript из элемента span

Сделать: ссылка влияет только на тело в CSS

Как перебрать объект htmlcollection?

Размер шрифта не обновляется внутри v-toolbar-title

Карта не отвечает при использовании бутстрапа после вставки формы

Вертикальная 3D-панель с использованием CSS

Создание окна поиска с помощью vue.js

Ответы 1

Другие вопросы по теме

Похожие вопросы