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

Question

[Sol-Mayers]

Разбираю задание из учебника по 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

[Rsa97]

Вы неправильно используете метод filter.
Во-первых, его каллбэк должен возвращать не значение элемента массива, а логическое значение, указывающее, включать элемент в результат или нет.
В-вторых filter не меняет исходный массив, а возвращает новый.
this.items = this.items.filter(el => el < 10);

Answer 2

[0xD34F]

data: () => ({
  items: [ 1, 25, 32, 4, 5 ],
  filter: false,
}),
computed: {
  filteredItems() {
    return this.items.filter(n => n < 10);
  },
},

<label>
  <input type="checkbox" v-model="filter">
  Фильтровать
</label>
<ul>
  <li v-for="n in (filter ? filteredItems : items)">{{ n }}</li>
</ul>

Answer 3

[Дима Паутов]

Потому что вы не меняете исходный массив. Нужно просто сделать так:

this.items = this.items.filter(function(elem) {
        if (elem < 10) {
          return elem;
        }
      });

Тут обычный js))