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

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

1 голос
/ 04 июля 2019

Я использую 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";
        }
    }
});

1 Ответ

4 голосов
/ 04 июля 2019

Вы можете добавить динамическую ссылку к кнопке 

 <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

...