Question

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

我有一个主意，要使这项工作从计算属性中返回搜索到的项目。然后使用foreach我们可以隐藏一些类别。不幸的是，计算属性不会返回搜索到的项目。

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

让我们以这个小提琴为例。尝试搜索“绿色”，您仍将看到div类别为空的汤。

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

Simple Fiddle

Answer 1

您可以基于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)">

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

1 个答案: