Vuejs2 BootstrapVue按钮状态：单击其他按钮时重置按钮

考虑以下代码

{{data.item.age}
显示年龄

newvue({
el:“应用程序”，
数据（）{
返回{
字段：[“名字”、“姓氏”、“年龄”]，
项目：[
{年龄：40岁，年龄：假，名字：'Dickerson'，姓氏：'Macdonald'}，
{年龄：21岁，年龄：假，名字：'Larsen'，姓氏：'Shaw'}，
{年龄：89岁，年龄：假，名字：“日内瓦”，姓氏：“威尔逊”}，
{年龄：38岁，年龄：假，名字：'Jami'，姓氏：'Carney'}
]
}
},
});

这给了你

当你点击“显示年龄”时，年龄就会显示出来。试穿一下

我的问题：

当有人单击“显示年龄”的另一行时，显示行中的年龄现在应该再次隐藏。我怎样才能做到这一点

另外，请告诉我是否确实需要显示列

age\u visible

版本

• Vue 2.6.12
• 引导程序4.6.0
• BootstrapVue 2.21.2

---

我认为年龄是不必要的。这里的问题似乎是，一旦你移动到下一个按钮，你永远不会对之前点击的按钮做任何事情。当您单击一个新按钮时，最后一个按钮应恢复到其原始状态
我的想法是在

data（）

中设置一个跟踪当前索引的工具，然后当您单击按钮时，它会检查当前索引是否与刚才单击的按钮匹配。如果为真，则显示年龄；如果为假，则隐藏年龄。关于我的解决方案，唯一奇怪的CSS是，按钮一旦被点击，就不再保持红色，除非你将鼠标悬停在它上面
这是我的

newvue({
el:“应用程序”，
数据（）{
返回{
当前索引：-1，
字段：[“名字”、“姓氏”、“年龄”]，
项目：[
{索引：0，年龄：40，名：'Dickerson'，姓：'Macdonald'}，
{索引：1，年龄：21，名：“拉尔森”，姓：“肖”}，
{索引：2，年龄：89，名：“日内瓦”，姓：“威尔逊”}，
{索引：3，年龄：38，名字：“Jami”，姓：“Carney”}
]
}
},
方法：{
设置索引（pendingIndex）{
this.currentIndex=pendingIndex
}
}
});

{{data.item.age}
显示年龄