Question

我有一个vuetify数据表，该表呈现了从axios调用接收的数据。

在最后一列上，我使用定制模板列的模板v型槽，因此可以添加两个按钮。根据文档https://vuetifyjs.com/en/components/buttons#loaders，v-btn accepts有两个用于加载状态的道具：

：正在加载
：已禁用

问题是，当我调用一个更改这些值的函数时，数据表中的所有按钮都处于prop状态，因此它们不是1个显示Disply的加载器，而是全部。

<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未在代码笔中定义。

如何在Vuetify数据表中更改单个按钮的属性？

1 个答案: