Как скрыть категории, если после поиска вложенное меню пустое?

Question

Я сделал простой поиск с помощью Vue, который должен был найти элемент из списка меню.Хотя поиск работает отлично, мне нужно сделать какой-то трюк.В основном, после поиска элемента будут отображаться элементы с категориями.Категории и элементы вложены.Иногда после поиска наши категории могут быть пустыми.В этом случае мне нужно скрыть те категории, в которых нет подходящего искомого элемента.

У меня есть идея, чтобы заставить эту работу возвращать искомые элементы из вычисленного свойства.Затем с помощью foreach мы можем скрыть некоторые категории.К сожалению, вычисляемое свойство не возвращает искомые элементы.

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

Давайте рассмотрим пример на этой скрипке.Попробуйте найти «Зеленый», вы все равно увидите категорию Супы с пустым div.

Мой вопрос: как я могу скрыть эту категорию "супов"?

Простая скрипка

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