Как правильно сделать фильтр по каталогу?

Question

[danilr]

Делаю на Vue каталог + фильтры для него.
На вход есть два массива - один все информация для элементов каталога.
Второй - фильтры для каталога.
Фильтровать надо по ключам cow, pig, bird, ram ...
Вот эти массивы

export const meatFood = [
  {
    title: 'Говядина тушеная',
    cow: true,
    pig: false,
    bird: false,
    ram: false,
    deer: false,
    kasha: false,
    others: false
  },
    title: 'Тушеная',
    cow: false,
    pig: false,
    bird: false,
    ram: true,
    deer: false,
    kasha: false,
    others: false
  },
    title: 'Вареная',
    cow: true,
    pig: false,
    bird: false,
    ram: true,
    deer: false,
    kasha: false,
    others: false
  },
]
// фильтры
      filters:[
        {
          name: 'Говядина',
          code: 'cow',
          img: '/img/filters/cow.svg'
        },
        {
          name: 'Свинина',
          code: 'pig',
          img: '/img/filters/pig.svg'
        },
        {
          name: 'Птица',
          code: 'bird',
          img: '/img/filters/bird.svg'
        },
        {
          name: 'Баранина',
          code: 'ram',
          img: '/img/filters/ram.svg'
        },
        {
          name: 'Оленина',
          code: 'deer',
          img: '/img/filters/deer.svg'
        },
        {
          name: 'Каши',
          code: 'kasha',
          img: '/img/filters/kasha.svg'
        },
        {
          name: 'Остальное',
          code: 'others',
          img: '/img/filters/others.svg'
        },
      ]

Answer 1

[0xD34F]

На основе массива filters создайте элементы управления, для переключения активности фильтров:

<label v-for="f in filters">
  <input type="checkbox" v-model="f.checked">
  {{ f.name }}
</label>

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

computed: {
  filteredFood() {
    const filters = this.filters.filter(n => n.checked).map(n => n.code);
    return this.meatFood.filter(n => filters.some(f => n[f]));
  },
},

UPD. Структура данных конечно странная - зачем отдельные булевы свойства для состава продукта не очень понятно. Почему бы не одно свойство, массив, где этот самый состав будет просто перечислен?

Comments

[danilr]

Свойство в элементе каталога сделать так?
filter: [ 'cow', 'pig' ]
Можете написать будет не через чекбоксы, а просто div, обрабатываемый методом?

[0xD34F]

danilr,

Свойство в элементе каталога сделать так?

Меньше слов, больше дела.

Можете написать будет не через чекбоксы, а просто div, обрабатываемый методом?

Я не понимаю, что вы говорите.

[danilr]

0xD34F, там слово "как" пропущено)

[0xD34F]

danilr, яснее не стало.

[danilr]

0xD34F, кнопки фильтры нажимаются кликом на див, чекбоксы не использую

[0xD34F]

danilr, и? Вопрос-то в чём? Хватит тупить, говорите по делу.

[danilr]

Что происходит при клике, что записывается, в каком виде?@0xD34F,

[0xD34F]

danilr, так, последняя попытка. Не сможете объяснить, чего вам надо, в чём ваша проблема - по этому вопросу наше общение завершится.

[danilr]

0xD34F, Разобрался.