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

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

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

Answer 2

您可以使用.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数组且其值至少在{{1 }}数组，请使用.some()而不是checked。

如何在Vue中比较array.include（arrayData）

2 个答案: