vuetifyjs v-simple-table - 单击时更改按钮的加载状态答案

【问题标题】：vuetifyjs v-simple-table - change the loading status of the button on clickvuetifyjs v-simple-table - 单击时更改按钮的加载状态
【发布时间】：2021-02-04 08:31:18
【问题描述】：

我有一个 vuetifyjs v-simple-table。我正在做 v-for 来填充一些数据。我在每一行都有一个按钮。当我单击按钮时，它应该显示加载状态（单击的按钮）。我有以下代码

<v-simple-table>
   <template v-slot:default>
      <thead>
         <tr>
            <th>
               Status
            </th>
            <th class="text-left">
               Actions
            </th>
         </tr>
      </thead>
      <tbody>
         <tr v-for="(item, index) in parcels" v-bind:key="index" :class="item.order.bgColorClass">
            <td>
               <div class="status">
                  <span class="a-blue">Notified </span>
                  <v-icon>mdi-star</v-icon>
               </div>
            </td>
            <td>
               <v-btn  :ref="item.order.orderId" :loading="false" text class="table-btn" @click="AddItem(item.order.orderId)">
                  <v-img src="images/plus-i.svg"></v-img>
               </v-btn>
            </td>
         </tr>
      </tbody>
   </template>
</v-simple-table>

方法是

  methods:{  
     AddItem(orderId) {
        this.$refs[orderId][0].loading = true;
     },

上面的方法显示了加载器，但我猜这不是正确的方法。我在控制台上收到以下错误

[Vue 警告]：避免直接改变一个 prop，因为它的值会是每当父组件重新渲染时被覆盖。相反，使用基于道具值的数据或计算属性。道具存在变异：“加载”

如何正确改变点击按钮的加载状态？

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

我会拿起那个按钮并把它包装起来，例如：

{
  name: "wrapped-v-btn",
  data(){
    return {
      loading: false
    }
  }
}

<template>
  <v-btn  
    :loading="loading" 
    @click="loading=!loading"
    v-bind="$attrs"
  >
    <v-img src="images/plus-i.svg"></v-img>
  </v-btn>
</template>


...
<td>
  <wrapped-v-btn text class="table-btn" />
</td>

【讨论】：