Vue.js 检查组件是否处于活动状态以隐藏它

我创建了一个对象数组，并根据单击事件渲染它们。使用Vue有没有办法，如果我单击“生存”按钮，如果它已经设置为activeCategory，它会隐藏自己？就像手风琴一样

    .store__categories
    StoreCategoryButton(
     icon='/images/ui/alarm.svg',
     title='survival',
     @click.native='SetActiveCategory("survival")'
    )
  .category__items(v-if='activeCategory === "survival"')
    StoreCategoryItems(v-for='(item, index) in SurvivalItems',
    :title='item.title',
    :icon='item.icon',
    :price='item.price')
    
  .store__categories
    StoreCategoryButton(
     icon='/images/ui/checkbox-active.svg',
     title='War Mode',
     @click.native='SetActiveCategory("war")'
    )
  .category__items(v-if='activeCategory === "war"')
    StoreCategoryItems(v-for='(item, index) in warItems',
    :title='item.title',
    :icon='item.icon',
    :price='item.price',
    :quantity='item.quantity')

数据：

方法：

methods: {
    SetActiveCategory(category) {
      this.activeCategory = category
    }
  }

---

当然，在您的方法中，您可以检查

activeCategory

是否已经是相同的

category

，在这种情况下，将其设置回默认值

'

：

方法：{
SetActiveCategory（类别）{
if（this.activeCategory！==类别）{
this.activeCategory=category
}否则{
this.activeCategory=''
}
}
}

methods: {
    SetActiveCategory(category) {
      this.activeCategory = category
    }
  }