在vue项目中使用v-for遍历渲染button或其他组件时给组件加loading

如果给组件都加上一个固定的值，比如loading,那么loading改变时，所有的button都会改变其loading状态。如

<div class="card-bottom" v-for="(item,index) in cardData" :key="index">
    <el-button
      size="mini"
      style="border: 1px solid rgba(51, 94, 251, 0.50); color: #335EFB;"
      @click.stop="testData(item,index)"
      :loading="loading"
      >检测</el-button>
</div>

data() {
    return {
      cardData: [],
      loading:false,
}

testData(item, index) {
      this.loading = true
      setTimeout(() => {
          this.loading = false;
      }, 5000);
}

结果：

解决办法：

此时可以给loading绑定一个条件

<el-button
  size="mini"
  style="border: 1px solid rgba(51, 94, 251, 0.50); color: #335EFB;"
  @click="testData(item,index)"
  :loading="index==loadingIndex"
   >检测</el-button>

在触发操作时根据v-for遍历传入的index来修改loadingIndex的值，当loadingIndex的值和点击的按钮index值相同时loading为true

testData(item, index) {
      if (!!this.loadingIndex || this.loadingIndex == 0) {
        this.$message.error("正在检测中...");
      } else {
        this.loadingIndex = index;
        setTimeout(() => {
          this.loadingIndex = undefined;
        }, 5000);
      }
    },