如何在Vuetify數據表中更改單個按鈕的屬性？

Question

我有一個vuetify數據表，該表呈現了從axios調用接收的數據。

在最后一列中，我使用定制模板列的v型槽模板，因此可以添加兩個按鈕。 根據文檔https://vuetifyjs.com/en/components/buttons#loaders，v-btn accepts有兩個用於加載狀態的道具：

• ：加載
• ：禁用

---

問題是，當我調用一個更改這些值的函數時，數據表中的所有按鈕都處於prop狀態，因此它們不是1個顯示加載器的按鈕，而是全部。

<v-row no-gutters>      
                <v-data-table
                :headers="tableHeaders"
                :items="requests"
                :items-per-page="10"
                class="elevation-1"
                :loading="loading" loading-text="Loading... Please wait"
                >

                <template v-slot:item.action="{ item }">
                    <v-btn color="success" @click="createPacks(item)" :loading="createloading" :disabled="createloading">Create</v-btn>
                    <v-btn color="error" @click="excludeRequest(item)" :loading="cancelloading" :disabled="cancelloading">Cancel</v-btn>     
                </template>
                </v-data-table>
            </v-row>

我知道這是因為DOM中的按鈕不是唯一的，並且框架正在調用所有按鈕，但是我不知道如何更改該默認行為。

---

數據：

export default {
    data() {
        return {
            loading: null,
            error: null,
            tableHeaders: [
                {
                    text: 'ID',
                    value: 'req_id',
                    align: 'center',
                },
                { text: 'Template', value: 'templateConcatenated'},
                { text: 'No of batches', value: 'no_batches' },
                { text: 'Batch size', value: 'batch_size' },
                { text: 'Date requested', value: 'requested_at' },
                { text: 'Requested by', value: 'requester' },
                { text: 'Actions', value: 'action', sortable: false, align: 'center'},
            ],

            createloading: false,
            cancelloading: false,
            successmessage: '',
            errormessage: '',

        };
    },
    methods: {

        createPacks(item) {
            this.loading = true;
            this.createloading = true;
            let page_url = '/api/CreateProcedure?api_token='+this.$api_token;
            axios
                .post(page_url, item)
                .then((response) => {
                    this.loading = false;

                    this.error = null;
                    this.createloading = false;
                    this.successmessage = 'Packs created successfully!';
                    this.errormessage = null;
                })
                .catch(err => {
                    this.createloading = false;
                    this.successmessage = null;
                    this.errormessage = 'Error creating the packs: '+err;
                    console.log("error: "+err);
                })
        },

    }
}

知道如何調用每個按鈕來更改其狀態嗎？

謝謝

Answer 1

您必須在項目本身上設置加載屬性，而不是全局定義它們：

createPacks(item) {
        this.loading = true;
        item.createloading = true;
        let page_url = '/api/CreateProcedure?api_token='+this.$api_token;
        axios
            .post(page_url, item)
            .then((response) => {
                this.loading = false;

                this.error = null;
                item.createloading = false;
                this.successmessage = 'Packs created successfully!';
                this.errormessage = null;
            })
            .catch(err => {
                item.createloading = false;
                this.successmessage = null;
                this.errormessage = 'Error creating the packs: '+err;
                console.log("error: "+err);
            })
    },

---

==更新==

我根據注釋中添加的代碼筆添加了代碼，您還必須在HTML中使用item.createloasing，否則它將無法正常工作。 https://codepen.io/reijnemans/pen/LYPerLg?editors=1010

當前，只有一個按鈕可以同時工作，但這可能是因為在代碼筆中未定義axios。