Vue中过滤JSON对象，获取cost为0.00的列表项

看起来你卡在了嵌套数组的过滤逻辑上——你的需求是保留所有标签结构，但仅保留每个标签内cost为"0.00"的列表项，但目前的代码逻辑搞反了层级，而且没有正确修改标签内的列表数据。

你的代码问题出在哪？ #

你用了两层filter，但外层的filter是用来筛选标签的，而你返回的是listings.filter()的结果（一个数组）。在JavaScript里，非空数组会被判定为true，空数组为false，所以这段代码的实际效果是：保留那些至少有一个列表项的标签，但完全没有过滤标签内的列表项，更没有修改标签的listings属性。另外，外层filter的参数命名也容易混淆——你写的(listings)实际是每个标签对象，建议命名为tag来提升可读性。

正确的实现方式 #

我们需要用map遍历所有标签（保留标签原有结构），同时对每个标签内的listings数组做过滤，最后返回更新后的标签对象：

filteredListings() {
  // 遍历每个标签，保留原有属性，仅替换过滤后的listings
  return this.tags.map(tag => {
    // 过滤当前标签下cost为"0.00"的列表项
    const validListings = tag.listings.filter(l => l.cost === "0.00");
    // 返回新的标签对象，避免直接修改原数据（推荐做法）
    return { ...tag, listings: validListings };
  });
}

额外需求：移除无有效列表项的标签 #

如果你还想把那些过滤后listings为空的标签也删掉，可以在map之后再加一层filter：

filteredListings() {
  return this.tags.map(tag => {
    const validListings = tag.listings.filter(l => l.cost === "0.00");
    return { ...tag, listings: validListings };
  }).filter(tag => tag.listings.length > 0); // 移除没有符合条件列表项的标签
}

内容的提问来源于stack exchange，提问作者Udders