vue.js - Массивы: Как сравнить array.include (arrayData)?

Question

у меня есть два массива данных

checked: [
'orange', 'apple', 'juice'
]

и 2-й

products: [
 '0': {
    title: 'this is product title',
    categories: [
     'apple', 'juice'
    ]
  }
]

я хочу отфильтровать данные с вычисляемым свойством с флажком

я пробовал это

computed: {
   filterProducts(){
       return this.products.filter(product => this.checked.includes(product.categories));
   }
}

но это не работает, как я могу это сделать

Answer 1

Вы можете использовать .every() для этого.

Вот пример:

checked = [
  'orange', 'apple', 'juice'
]

products = [{
  title: 'this is product title',
  categories: [
    'apple', 'juice'
  ]
}];

const filteredProducts = products.filter(({ categories }) => categories.every(cat => checked.includes(cat)));

console.log(filteredProducts);

Это вернет массив продуктов, которые имеют массив categories со всеми его значениями, включенными в массив checked.

I'mне уверен, что это именно то, что вы пытаетесь сделать, если вместо этого вы хотите получить все продукты с массивом categories, который имеет хотя бы одно из своих значений в массиве checked, используйте .some() вместо .every().

Answer 2

Вы пытаетесь проверить, содержит ли массив строк массив (который не будет работать, даже если ваш исходный массив содержал массивы).Вместо использования .includes() используйте .every() для product.categories, чтобы проверить, содержатся ли все элементы в этом массиве в флажке:

const checked = ['orange', 'apple', 'juice'];

const products = [
  {
    title: 'this is product title',
    categories: ['apple', 'juice']
  }
];

const computed = products.filter(product => product.categories.every(item => checked.includes(item) || !checked.length));

console.log(computed);