Change attribute of this button inside v-for loop in Vue.js

Question

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:

Answer 1

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.