@msdoc11

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

Есть небольшой код: https://codepen.io/msdoc11/pen/ZEJverK

Если указать у продукта size вот так: size: "XL", то есть один параметр, то все работает.

Если указать массив size: ["XL", "XXL"], то не работает. Как правильно сравнить два массива?

Сейчас в коде указан массив данных, поэтому не работает фильтр по размерам.
  • Вопрос задан
  • 406 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
computed: {
  filteredProducts() {
    const keyword = this.keyword.toLowerCase();

    return this.products.filter(item => (
      (item.name.toLowerCase().includes(keyword)) &&
      (!this.colors.length || this.colors.includes(item.color)) &&
      (!this.sizes.length || this.sizes.some(n => item.size.includes(n))) &&
      (!this.categories.length || this.categories.includes(item.category))
    ));
  },
  ...

UPD. Вопрос конечно был не об этом, но уж как-то сильно глаз режет... Размеры ладно, какие они бывают известно заранее и их немного, но вот, скажем, цвета - когда изменится список товаров, будете вручную его просматривать и обновлять список цветов? Можно вычислять автоматически:

computed: {
  colorFilter() {
    return Array
      .from(new Set(this.products.map(n => n.color)))
      .sort((a, b) => a.localeCompare(b));
  },
  ...
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы