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

Question

我创建了一个对象数组，并根据单击事件渲染它们。使用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')

数据：

activeCategory: '',

方法：

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

Answer 1

当然，在您的方法中，您可以检查activeCategory是否已经是相同的category，在这种情况下，将其设置回默认的'':

methods: {
SetActiveCategory(category) {
if (this.activeCategory !== category) {
this.activeCategory = category
} else {
this.activeCategory = ''
}
}
}