-1

Есть массив объектов:

movies = [{ name: "Amovie1", year : 2011 }, { name: "Bmovie2", year: 2012 }, {
name: "Cmovie3", year: 2013 }];

Есть поле

<input 
                            type="text"
                            placeholder="Найти фильм...">
                        <button 

При вводе нового значения в поле, например Am - элемент, который соответствует параметрам поиска, остается, а остальные временно скрываются

Прочитала информацию насчет метода filtered Думаю, это то, что мне нужно. НО. Как мне прописать вызов этой функции в Html? Какая директива подойдет? И как грамотно прописать эту функцию в моем случае?

2 ответа 2

2

Дополню ответ Alex Sazonov.

Лучше в этом случае использовать computed, чтобы не менять исходные данные

new Vue({
  el: "#app",
  data() {
    return {
      movies: [
        { name: "Amovie1", year : 2011 }, 
        { name: "Bmovie2", year: 2012 }, 
        { name: "Cmovie3", year: 2013 }
      ],
      inputStr: ''
    }
  },
  computed: {
    filteredMovies() {
      if (this.inputStr) {
        return this.movies.filter(item => {
            return item.name.includes(this.inputStr);
        });
      }
      return this.movies
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" v-model="inputStr">
  <ul>
    <li v-for="(item, index) of filteredMovies" :key="index">{{ item.name }}</li>
  </ul>
</div>

0
<div>
  <input type="text" v-model="inputStr" @keyup="sortArray">
  <ul>
    <li v-for="(item, index) of list" :key="index">{{ item.name }}</li>
  </ul>
</div>


created() {
    this.list = this.movies;
}
data() {
  return {
    movies: [
      { name: "Amovie1", year : 2011 }, 
      { name: "Bmovie2", year: 2012 }, 
      { name: "Cmovie3", year: 2013 }
    ],
    inputStr: '',
    list: [],
  }
},
methods: {
  sortArray() {
    this.list = this.movies.filter(item => {
      return item.name.includes(this.inputStr);
    });
  }
}

По идее вот так должно работать. Проверил. Работает.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.