Как я могу обновить кнопку, нажатую в bootstrap-vue

Я использую Bootstrap-Vue для отображения таблицы, и у меня добавлен в дополнительный столбец с кнопкой обновления с помощью vue-slot. У меня это отображается нормально, и у меня есть метод, вызываемый при нажатии кнопки. В рамках этого метода я могу получить доступ ко всей информации об элементе, но, похоже, я не могу найти способ получить доступ к кнопке. Я хочу отключить его и изменить его содержимое. Как я могу получить доступ к кнопке? Я создал пример кода здесь, который показывает, что я настроил и что мне нужно сделать.

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


person Styphon    schedule 04.07.2019    source источник


Ответы (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 ваших данных для создания ссылки (data.item.id)

Хотя лично это кажется неправильным, я думаю, было бы лучше, если бы мы могли отслеживать состояние всех кнопок в том же или другом массиве, может быть, как в следующем примере

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

person Alvaro Ccatamayo    schedule 04.07.2019