Javascript 如何更新在引导vue中单击的按钮

我正在使用来显示一个表，并且使用vue插槽添加了一个带有更新按钮的额外列。我有一个很好的显示，我有一个方法被调用，当你点击按钮。在该方法中，我可以访问该项目的所有信息，但我似乎找不到访问按钮的方法。我想禁用它并更改它的内容。如何访问按钮元素？我已经创建了一个显示我设置了什么和需要做什么的

HTML

---

{{this.output}}
使现代化

JavaScript

---

newvue({
el:“应用程序”，
数据：{
输出：null，
项目：[
{
id:1，
姓名：“托尼”
},
{
id:2，
姓名：“约翰”
},
{
id:3，
姓名：“保罗”
}
],
字段：[
{
密钥：“id”，
标签：“ID”，
可排序：正确
},
{key:“name”}，
{键：“操作”}
]
},
方法：{
更新（数据）{
//我需要禁用这里的按钮
这个输出=数据；
data.item.name=“Dave”；
}
}
});

您可以向按钮添加动态参考

 <button class="btn btn-dark" @click="update(data)" :ref="'btn' + data.index">Update</button>

这是一个带有示例的代码笔

除了索引，您还可以使用数据的id属性来创建ref（data.item.id）

虽然我个人觉得这样做不对，但我认为如果我们能够跟踪相同或不同数组中所有按钮的状态会更好，可能像下面的示例中那样

---

您可以向按钮添加动态参考

 <button class="btn btn-dark" @click="update(data)" :ref="'btn' + data.index">Update</button>

这是一个带有示例的代码笔

除了索引，您还可以使用数据的id属性来创建ref（data.item.id）

虽然我个人觉得这样做不对，但我认为如果我们能够跟踪相同或不同数组中所有按钮的状态会更好，可能像下面的示例中那样