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

Posted 2023-02-23

【中文标题】vuetifyjs v-simple-table - 单击时更改按钮的加载状态

【英文标题】：vuetifyjs v-simple-table - change the loading status of the button on click

【发布时间】：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，因为它的值会是 每当父组件重新渲染时被覆盖。相反，使用 基于道具值的数据或计算属性。道具存在 变异：“加载”

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

【参考方案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>