当点击特定按钮时，特定按钮的加载器应该在 vue js 中加载

问题描述

有一个产品组件，当我点击调用特定产品按钮上的 API 响应时，其中有两个按钮接受和拒绝每个按钮，但问题是当我点击特定产品按钮时，所有产品按钮开始加载

 <template>
      <v-card class="mx-4 my-4" max-width="250px">
        <v-img :src="getimageURL()" height="200px"></v-img>

        <v-card-title>
          {{ product.product_name }}
        </v-card-title>
        <v-card-subtitle>
          {{ product.product_sale_price }}
        </v-card-subtitle>

        <v-card-actions class="d-flex justify-space-between wrap">
          <v-btn
            color="success"
            outlined
            rounded
            :loading="loader && indexClicked === id"
            text
            @click="acceptRequest(product.id,id)"
          >
          
            Accepted
            <span v-if="loader" class="custom-loader">
              <v-icon light>mdi-cached</v-icon>
            </span>
          </v-btn>
          <v-btn
            color="error"
            class="lower-case"
            :loading="loader && indexClicked === id"
            outlined
            rounded
            text
            @click="rejectRequest(product.id)"
          >
            Rejected
            <span v-if="loader" class="custom-loader">
              <v-icon light>mdi-cached</v-icon>
            </span>
          </v-btn>
          
          <v-snackbar
            v-if="statusMessage"
            v-model="snackbar"
            :timeout="timeout"
            color="red"
            top
            center
          >
            {{ statusMessage }}

          </v-snackbar>
        </v-card-actions>
      </v-card>
    </template>

解决方法

两个按钮 loading 都绑定到相同的值 :loading="loader && indexClicked === id" => 当条件为真时，两个按钮都将开始加载