Vue搜索后如何隐藏无匹配项的嵌套空分类？

我懂你的困扰——现在的搜索逻辑只盯着分类标题做匹配，完全没处理分类下的子项目，就算分类里搜不到任何内容，它还是会留在列表里对吧？咱们一步步把这个问题搞定：

首先得明确原代码的问题：你的计算属性只过滤了分类本身是否包含搜索词，既没处理分类下的子项目，也没检查过滤后分类是不是空的。要实现需求，咱们得完成两个核心步骤：

• 先给每个分类过滤出匹配搜索词的子项目
• 再把那些过滤后没有有效子项目的分类彻底隐藏

假设你的菜单结构是类似这样的（每个分类包含title和子项目数组items）：

menu: [
  { title: "Soups", items: [{ name: "Tomato Soup" }, { name: "Chicken Noodle" }] },
  { title: "Salads", items: [{ name: "Green Salad" }, { name: "Caesar Salad" }] }
]

那你可以把计算属性改成下面这样：

computed: {
  filteredItems: function() {
    // 先把搜索词统一转成小写，避免大小写敏感问题，也减少重复计算
    const lowerSearchTerm = this.searchTerm.toLowerCase();
    
    // 第一步：遍历每个分类，过滤它的子项目
    const processedCategories = this.menu.map(category => {
      // 筛选当前分类下匹配搜索词的子项目（这里假设子项目用name字段，你可以换成自己的字段）
      const matchedSubItems = category.items.filter(subItem => 
        subItem.name.toLowerCase().includes(lowerSearchTerm)
      );
      // 返回新的分类对象，保留原分类的所有属性，仅替换为过滤后的子项目
      return { ...category, items: matchedSubItems };
    });
    
    // 第二步：过滤掉没有有效内容的分类
    return processedCategories.filter(category => {
      // 这里的逻辑可以按需调整：
      // 1. 只想保留有匹配子项目的分类：直接用 category.items.length > 0
      // 2. 想同时保留「分类标题匹配」或「有匹配子项目」的分类：用下面的逻辑
      return category.title.toLowerCase().includes(lowerSearchTerm) || category.items.length > 0;
    });
  }
}

关键逻辑说明： #

1. 统一小写处理：把搜索词转成小写一次，避免在多次判断里重复转换，既提升性能又解决大小写敏感的问题。
2. 子项目过滤：用map遍历每个分类，给每个分类生成一个新对象，其中items是过滤后的子项目列表——这样不会修改原菜单数据，符合Vue的响应式最佳实践。
3. 空分类过滤：最后用filter把那些既没有匹配子项目、分类标题也不匹配搜索词的分类去掉。比如搜索"Green"时，Soups分类因为子项目没匹配、标题也不匹配，就会被彻底过滤掉。

如果你的子项目用的不是name字段（比如是title），记得把subItem.name改成你实际使用的字段就行～

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