Question

我正在使用Vue.js v-for循环输出信息表，每个信息表都有自己的操作按钮，就像使用Element UI库一样。

    <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>

当我单击其中一个按钮时，我希望能够将被单击按钮的:loading属性设置为true，并将按钮标签更改为正在加载... 直到给定的Ajax请求完成为止。

我在按钮上使用了:ref属性，当单击按钮时，我按如下方式更改了属性：

checkInOrder(index, row) {
   this.$refs['btn-' + index].loading = true;
}

这似乎可以正常工作，但是控制台发出警告，所以我想找出实现此目的的方法。

我得到的警告是这样的：

Answer 1

我相信它会提示您将:loading链接到可以设置的属性，而不是直接更改prop属性。因此，当您调用checkInOrder()时，只需更新链接到:loading的布尔属性。

我相信此question是相关的，将帮助您解决此问题。

在Vue.js的v-for循环内更改此按钮的属性

1 个答案: