时间戳

首页 > 解决方案 > 如何更改 vuetify 数据表中单个按钮的属性？

javascript - 如何更改 vuetify 数据表中单个按钮的属性？

问题描述

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

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

问题是，当我调用一个更改这些值的函数时，数据表中的所有按钮都在接收道具状态，所以不是 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);
                })
        },

    }
}

知道如何调用每个单独的按钮来改变它的状态吗？

谢谢

标签： javascriptdatatablevuetify.js

解决方案

您必须在项目本身上设置加载属性，而不是全局定义它们：

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

== 更新 ==

我根据您在评论中添加的 codepen 添加了一个代码，您还必须在 HTML 中使用 item.createloasing 否则它不起作用。https://codepen.io/reijnemans/pen/LYPerLg?editors=1010

目前只有一个按钮同时工作，但这可能是因为在 codepen 中没有定义 axios。

推荐阅读