Как вывести отфильтрованный массив по клику на кнопку?

Question

[coder56]

Дана кнопка. Дан массив с числами. Надо вывести элементы этого массива в виде списка ul.
По нажатию на кнопку на экране должны остаться только те элементы, число в которых больше 0, но меньше 10.
Код:

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

let app = new Vue({
    el: '#app',
    data: {
        items: [8,6,22,15,14,9,7,5,3]
    },
    methods: {
        filterMassive: function (items) {
            return items.filter(function (item) {
                return item >0 && item <10;
            });
        }
    },
});

Как сделать, чтобы vue выводил отфильтрованный массив по нажатию на кнопку, а не сразу, как в коде выше?

Answer 1

[0xD34F]

<button @click="showFiltered = !showFiltered">
  Показать {{ showFiltered ? 'все' : 'отфильтрованные' }} элементы
</button>
<ul>
  <li v-for="n in (showFiltered ? filteredItems : items)">{{ n }}</li>
</ul>

data: () => ({
  items: [ ... ],
  showFiltered: false,
}),
computed: {
  filteredItems() {
    return this.items.filter(n => 0 < n && n < 10);
  },
},

Comments

[coder56]

спасибо)