javascript - 如何更新在 bootstrap-vue 中单击的按钮
问题描述
我正在使用Bootstrap-Vue来显示一个表格,并且我在一个额外的列中添加了一个使用 vue-slot 的更新按钮。我的这个显示很好,当你点击按钮时我有一个方法被调用。在该方法中,我可以访问该项目的所有信息,但是我似乎无法找到访问该按钮的方法。我想禁用它并更改它的内容。如何访问按钮元素?我在这里创建了一个 codepen 示例,显示了我已经设置和需要做的事情。
HTML
<div id='app'>
<div>{{ this.output }}</div>
<b-table hover head-variant="dark"
id="pages-table"
:items="items"
:fields="fields">
<template slot="actions" slot-scope="data">
<button class="btn btn-dark" @click="update(data)">Update</button>
</template>
</b-table>
</div>
JavaScript
new Vue({
el: "#app",
data: {
output: null,
items: [
{
id: 1,
name: "Tony"
},
{
id: 2,
name: "John"
},
{
id: 3,
name: "Paul"
}
],
fields: [
{
key: "id",
label: "ID",
sortable: true
},
{ key: "name" },
{ key: "actions" }
]
},
methods: {
update(data) {
// I need to disable the button here
this.output = data;
data.item.name = "Dave";
}
}
});
解决方案
您可以向按钮添加动态引用
<button class="btn btn-dark" @click="update(data)" :ref="'btn' + data.index">Update</button>
然后只需通过该参考访问按钮
this.$refs["btn" + data.index].disabled = true
这是带有示例的代码笔
https://codepen.io/vlaem/pen/gNjGQE
除了索引,您还可以使用数据的 id 属性来创建 ref (data.item.id)
虽然个人感觉这不太对,但我认为如果我们可以跟踪相同或不同阵列上所有按钮的状态会更好,可能就像下面的示例一样
推荐阅读
- python - Predix - 与 Flask Python 服务器通信的聚合物前端?
- python - 如何为具有可变范围的 for 循环设置动画
- javascript - 从两个不同的按钮打开菜单
- html - 通过 id vb.net 获取 html 元素
- symfony - Symfony Bundle 需要每个项目不同的文件
- python - python ffmpeg moov atom not found 处理输入时数据无效
- c++ - 随机打开的exe列表
- c - 使用 gcc 在 C 中将 float 转换为 unsigned int
- java - Minimax 算法井字棋错误
- java - 如何在android中将base64字符串转换为十六进制?