Vue.js 如果搜索后嵌套菜单为空，如何隐藏类别？

我用Vue做了一个简单的搜索，它应该从列出的菜单中找到一个项目。虽然搜索很完美，但我需要做一些技巧。基本上，搜索一个项目后，将显示带有类别的项目。类别和项目是嵌套的。有时，在搜索之后，我们的类别可能是空的。在这种情况下，我需要隐藏那些没有合适搜索项的类别

我有一个想法，使这项工作是从计算属性返回搜索项。然后使用foreach可以隐藏一些类别。不幸的是，computed属性不返回搜索项

  computed: {
    filteredItems: function() {
      return this.menu.filter(item => {
          return item.title.toLowerCase().includes(this.searchTerm.toLowerCase())
      })
    }
  },

让我们以这把小提琴为例。尝试搜索“绿色”，你仍然会看到汤类的空div

我的问题是如何隐藏“汤”类别

---

您可以基于

filteredItems

创建另一个计算属性：

filteredCategories: function() {    
    return this.filteredItems.map( (item) => item.cat_id )
}

然后在

v-if

中使用它：

<div v-for="(c, index) in categories" :key="index" v-if="filteredCategories.includes(c.id)">

---

这是一个完美的解决方案！非常感谢。