Как можно на VUE реализовать простенький фильтр?

Question

[Александр]

Приветствую уважаемое сообщество
подскажите пожалуйста как можно реализовать простенький фильтр для элементов
есть таблица с двумя типами строк
нужно чтоб при нажатии на ПЕРВУЮ кнопку - оставались видимыми строки первого типа
при нажатии на ВТОРУЮ кнопку - оставались видимыми строки второго типа
при нажатии на ТРЕТЬЮ кнопку - показывались ВСЕ строки
https://fiddle.jshell.net/arnqqqhs/

сейчас кнопки ПЕРЕКЛЮЧАЮТ видимость, а мне нужно только скрывать ненужные
спасибо большое

UPDATE

<button v-on:click="img = true, noimg = false" class="btn btn-success mr-1">Материалы c фото</button>
                        <button v-on:click="noimg = true, img = false" class="btn btn-danger mr-1">Материалы без фото</button>
                        <button v-on:click="noimg = true, img = true"  class="btn btn-info">Все материалы</button>

так работают статические таблицы, с указанным вручную v-show
но у меня строки формируются динамически
и поэтому я не могу записать нормально директиву v-show - туда попадает ТЕКСТ(img or noimg) а не свойство из DATA

Answer 1

[0xD34F]

Добавить два свойства - массив, описывающий типы, и тип, данные которого надо отобразить:

data: () => ({
  types: [
    { id: null, name: 'Все' },
    { id: ..., name: '...' },
    { id: ..., name: '...' },
    ...
  ],
  active: null,
  ...

Дать пользователю возможность выбирать тип отображаемых данных:

<button v-for="n in types" @click="active = n.id">{{ n.name }}</button>

<!-- или -->

<select v-model="active">
  <option v-for="n in types" :value="n.id">{{ n.name }}</option>
</select>

<!-- или -->

<label v-for="n in types">
  <input type="radio" name="type" :value="n.id" v-model="active">
  {{ n.name }}
</label>

Сделать вычисляемое свойство, которое будет представлять отфильтрованные данные:

computed: {
  filteredItems() {
    const { items, active } = this;
    return active ? items.filter(n => n.type === active) : items;
  },
  ...

Показать результат фильтрации:

<tr v-for="(n, i) in filteredItems">
  ...

https://jsfiddle.net/jhekutv3/

Answer 2

[Alibek Issakul]

Можно через computed сделать динамический список для таблицы. И там сгенерировать список по текущему фильтру.

...
computed: {
    list () {
        let arr = this.api_list
        let filtered = arr.filter(el => el.type === this.type)

       return filtered
    }
}
...