如何在 vue 中比较 array.include(arrayData)

Question

我有两个数组数据

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

第二个

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 数组中。

我不确定这是否正是您想要做的，如果您想使用categories 数组获取所有产品，该数组至少具有checked 数组中的一个值，使用.some() 而不是.every()。

Answer 2

您正在尝试检查字符串数组是否包含数组（即使您的初始数组包含数组也不起作用）。不要使用.includes()，而是在product.categories 上使用.every() 来检查此数组中的所有项目是否都包含在checked 中：

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);