vue js Поиск внутри массива

211

20 декабря 2019, 17:00

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

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

Есть поле

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

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

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

Answer 1

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

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

Answer 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>