Как сделать фильтрация элементов по категориям?

Question

[krauze666]

Есть главный компонент, где находятся два массива с обьектами ( 1. элементы 2. со значениями ( например категории)) и подключаются другие компоненты.
Category : [ { name: 'sport' , id: 1},......]
Elements : [ { category: 'sport', name: 't-shirt',...}]
Более мелкие компоненты:
1. шаблон одного элемента
2. список элементов
3. Шаблон категории
4. Список категорий
Как реализовать фильтрацию элементов в главном компоненте при клике на категорию? Т.е. как правильно отследить клик по категории?
Категории сделаны в виде обычных дивов, может быть лучшее их сделать в виде чекбоксов?

Answer 1

[LJ322]

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

Comments

[krauze666]

Cмысл понятен, только в примере на вью 2 https://codesandbox.io/s/custom-filter-using-vue-j...
Что поменять нужно чтоб работало на 3 версии?

[LJ322]

krauze666, оно и так будет работать на 3 версии, там обратная совместимость с Options API - filter

[krauze666]

LJ322, проблема была в синтаксисе v-model, при использовании на компонентах v-model поменялись входной параметр и имя события в 3 версии. Буду дальше разбираться, спасибо!