Блог

У меня есть 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. Реквизит мутирует: «загрузка»

Как я могу изменить статус загрузки кнопки, когда я нажимаю на нее надлежащим образом?

Я бы взял эту кнопку и обернул ее, например:

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