Qfyilyi

I'm using a Vue.js v-for loop to output a table of information, each with their own action buttons like so using Element UI library.

    <template>

    <div class="card">

        <div class="card-header">

            <tool-bar></tool-bar>

        </div>



        <div class="card-body">

            <el-table :data="orders" v-loading="loading" current-row-key="index" empty-text="No products found">

                <el-table-column type="expand">

                    <template slot-scope="props">



                        <el-tabs>

                            <el-tab-pane label="Order Items">

                                <ul>

                                    <li v-for="(product, index) in orders[props.$index].products" :key="index">{{ product.name }}</li>

                                </ul>

                            </el-tab-pane>

                            <el-tab-pane label="Customer Details">Customer Details

                                <!-- <p v-for="(customer, index) in orders[props.$index].order.billing_address" :key="index">{{ customer.index }}</p> -->

                            </el-tab-pane>

                        </el-tabs>





                    </template>

                </el-table-column>



                <el-table-column label="Order ID" prop="order.id"></el-table-column>

                <el-table-column label="Customer" prop="order.billing_address.first_name"></el-table-column>

                <el-table-column label="Due Time" prop="order.due_time"></el-table-column>



                <el-table-column

                    align="right">

                    <template slot="header" slot-scope="scope">

                        <el-input

                            v-model="search"

                            placeholder="Type to search"/>

                    </template>

                    <template slot-scope="scope">

                        <el-button size="mini" type="success" :disabled="orders[scope.$index].checked_in" :loading="false" :ref="'btn-' + scope.$index" @click="checkInOrder(scope.$index, scope.row)">{{ (orders[scope.$index].checked_in) ? 'Checked in' : 'Check in' }}</el-button>

                    </template>

                </el-table-column>

            </el-table>

        </div>

    </div>

</template>



<script>

    import Toolbar from '../components/Toolbar.vue';

    export default {

        components: {

            'tool-bar': Toolbar

        },

        mounted() {

            this.fetchOrders();

        },

        data () {

            return {

                search: '',

            }

        },

        computed: {

            loading() {

                return this.$store.getters.loading;

            },

            orders() {

                return this.$store.getters.orders;

            }

        },

        methods: {

            fetchOrders() {

                this.$store.dispatch('fetchOrders')

                .then(res => {

                })

                .catch(err => {

                })

            },

            checkInOrder(index, row) {

                this.$refs['btn-' + index].loading = true;



                axios.post('/order/update', {

                    id: row.order.id,

                    status: 'bakery',

                    products: row.products

                })

                .then(res => {

                    this.$refs['btn-' + index].loading = false;

                })

                .catch(err => {

                    this.$refs['btn-' + index].loading = false;

                })

            }

        }

    }

</script>

When I click one of the buttons, I want to be able to set the :loading attribute of the clicked button to true as well as change the button label to Loading... until a given Ajax request is completed.

I used the :ref attribute on the button and, when the button is clicked, I alter the attribute as follows:

checkInOrder(index, row) {

   this.$refs['btn-' + index].loading = true;

}

This seems to work fine, but the console is throwing a warning, so I want to find out the way to achieve this.

The warning I get is this:

I believe it's prompting you to link :loading to a property, which you can set, rather than mutating the element prop directly. Thus, when you call checkInOrder() you could just update the boolean property that :loading is linked to.

I believe this question is relevant and will help you fix this issue.

add a property called btnsLoading which is an array in your data as follows:

  data () {

        return {

            search: '',

            btnsLoading:null

        }

    }

in the mounted hook initialize that array with orders length and fill it with false values :

    mounted() {

        this.fetchOrders();

        this.btnsLoading=new Array( this.$store.getters.orders.length);

       this.btnsLoading.fill(false);

    }

and in your template do :

    <el-button ... :loading="btnsLoading[scope.$index]" ...></el-button>

and in your method :

       checkInOrder(index, row) {

           this.$set(this.btnLoading,index,true);



            axios.post('/order/update', {

                id: row.order.id,

                status: 'bakery',

                products: row.products

            })

            .then(res => {

                this.$set(this.btnLoading,index,false);

            })

            .catch(err => {

               this.$set(this.btnLoading,index,false);

            })