How can I update the button clicked in bootstrap-vue

Question

I am using Bootstrap-Vue to display a table, and I've added in an extra column with an update button using vue-slot. I have this displaying fine, and I have a method being called when you click the button. Within that method I can access all the information on the item however I can't seem to find a way to access the button. I want to disable it and change the contents of it. How can I access the button element? I have created a codepen example here that shows what I have set up and need to do.

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

Alvaro Ccatamayo Alvaro Ccatamayo · Accepted Answer · 2019-07-04T16:09:57

You could add a dynamic ref to the button

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

And then just access the button by that ref

  this.$refs["btn" + data.index].disabled = true

This is a codepen with the example

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

Instead of the index you could also use the id property of your data to create the ref (data.item.id)

Though personally this doens't feel right, I think it would be better if we could track the status of all the buttons on the same or a different array, maybe like in the following example

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

How can I update the button clicked in bootstrap-vue

HTML

JavaScript

1 Answers