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

Question

有一个产品组件，当我单击调用 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>

Answer 1

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