Как сделать фильтрацию по клику на Vue?

Question

Разбираю задание из учебника по Vue js. Не могу понять - почему у меня не работает фильтрация по клику на кнопку "Фильтровать"? После клика в списке должны оставаться только числа меньше 10. Сделать нужно именно с помощью метода filter.

let appMeth5 = new Vue({
  el: '#app11',
  data: {
    items: [1, 25, 32, 4, 5],
  },
  methods: {
    filter: function() {
      this.items.filter(function(elem) {
        if (elem < 10) {
          return elem;
        }
      });
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app11">
  <ul>
    <li v-for="item in items"> {{ item }} </li>
  </ul>
  <button v-on:click="filter">Фильтровать</button>
</div>

Answer 1

Причина в том, что метод filter() создаёт новый массив со всеми элементами, прошедшими проверку, задаваемую в передаваемой функции.

Таким образом, ваш метод отрабатывает как положено, вам осталось результат его работы присвоить какой-либо переменной:

let appMeth5 = new Vue({
  el: '#app11',
  data: {
    items: [1, 25, 32, 4, 5],
    filterItems: [],
  },
  methods: {
    filter: function() {
      this.filterItems = this.items.filter(function(elem) {
        if (elem < 10) {
          return elem;
        }
      });
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app11">
  <ul>
    <li v-for="item in items"> {{ item }} </li>
  </ul>
  <pre v-if="filterItems.length">{{ filterItems }}</pre>
  <button v-on:click="filter()">Фильтровать</button>
</div>

или заменить существующий массив:

let appMeth5 = new Vue({
  el: '#app11',
  data: {
    items: [1, 25, 32, 4, 5],
  },
  methods: {
    filter: function() {
      this.items = this.items.filter(function(elem) {
        if (elem < 10) {
          return elem;
        }
      });
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app11">
  <ul>
    <li v-for="item in items"> {{ item }} </li>
  </ul>
  <button v-on:click="filter()">Фильтровать</button>
</div>

БЛОГ НА HUSL

Как сделать фильтрацию по клику на Vue?

Ответы (1 шт):