如何更新在 bootstrap-vue 中单击的按钮答案

【问题标题】：How can I update the button clicked in bootstrap-vue如何更新在 bootstrap-vue 中单击的按钮
【发布时间】：2019-07-04 15:44:24
【问题描述】：

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

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";
        }
    }
});

【问题讨论】：

标签： javascript vue.js bootstrap-vue

【解决方案1】：

您可以为按钮添加动态引用

 <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)

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

https://codepen.io/vlaem/pen/GbBMLe

【讨论】：