0 

new Vue({
    el: '#app',
    vuetify: new Vuetify({
        theme: {
            dark: true
        },
    }),

    data() {
        return {
            loading: null,
            requests: [{"req_id":78},{"req_id":79}],
            tableHeaders: [
                {
                    text: 'ID',
                    value: 'req_id',
                    align: 'center',
                },
                
                { text: 'Actions', value: 'action', sortable: false, align: 'center'},
            ],

            createloading: false,
            cancelloading: false,

        };
    },
    methods: {

        createPacks(item) {
            this.loading = !this.loading;
            item.createloading = true;
        },

        excludeRequest(item) {
            this.loading =!this.loading;
            item.createloading = false;
        },
    }
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>

<div id="app">
  <v-app>
    <v-row no-gutters class="align-start justify-start">
        <v-col>
           
            <v-row>      
                <v-data-table
                :headers="tableHeaders"
                :items="requests"
                :loading="loading" 
                >
                <template v-slot:item.action="{ item }">
                    <v-btn color="success" @click="createPacks(item)" :loading="item.createloading" :disabled="item.createloading">Create</v-btn>
                    <v-btn color="error" @click="excludeRequest(item)" :loading="item.cancelloading" :disabled="!item.createloading">Cancel</v-btn>     
                </template>
                </v-data-table>
            </v-row>

            
        </v-col>
    </v-row>
    </v-app>
</div>

请帮助我正确实现此代码，因为它无法正常运行。按钮应该正确显示加载指示器并且应该是独立的。预先感谢您的慷慨。

下面是codepen的链接。 https://codepen.io/protemir/pen/MWwGaeO

4

0 回答 0