如何仅将加载添加到 vuejs 中的单击按钮？答案

【问题标题】：How can I add loading ONLY to the clicked button in vuejs?如何仅将加载添加到 vuejs 中的单击按钮？
【发布时间】：2019-12-23 23:57:59
【问题描述】：

有一个表格循环和输出来自API的数据。我在表格中添加了一个按钮。当你点击它时，它应该发送点击按钮的id，直到它收到需要打印的函数的数据，它应该在加载中。这是我的代码。

<table id="customers">
  <tr>
    <th>{{$t('message.numberReport')}}</th>
    <th>{{$t('message.periodFrom')}}</th>
    <th>{{$t('message.periodTo')}}</th>
    <th>{{$t('message.printButton')}}</th>
  </tr>
  <tr v-for="(item,index) in getReportInfo" :key="index">
    <td>{{ item.id }}</td>
    <td>{{ item.periodFrom }}</td>
    <td>{{ item.periodTo }}</td>
    <td>
      <v-btn
        class="primary"
        :loading="loading"
        :disabled="loading"
        @click="fetchGetReportDetailed(item)"
      >{{ $t('message.printButton')}}</v-btn>
    </td>
  </tr>
</table>

但是当我单击特定按钮时，所有按钮都处于加载模式。我如何解决它？任何建议将不胜感激。here is the visual example

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

使用列表中项目的`index`。

您可以在数据中注册一个新变量，例如indexClicked 。

data () {
    return {
        // Some predefined value, 0 isn't good because index can be 0.
        indexClicked: undefined // Some predefined value
    }
}

当您点击按钮时，您可以发送index 值：

<td>
<v-btn class="primary"
       :loading="loading && indexClicked === index" 
       :disabled="loading && indexClicked === index" 
       @click="fetchGetReportDetailed(item, index)">
       {{ $t('message.printButton') }}
</v-btn>
</td>

并且在您的fetchGetReportDetailed(item, index) 方法中，您需要将index 分配给this.indexClicked，例如：

fetchGetReportDetailed (item, index) {
    // Your code
    this.indexClicked = index;
}

这应该可行。但如果您需要更多信息，请提供更多代码。

注意如果您对:disable 中的多个条件有疑问，您可以创建一个方法，该方法将根据条件loading && this.indexClicked === index 返回真或假。

祝你好运！

【讨论】：

【解决方案2】：

您可以将显示数据的tr 分离到它自己的状态完整组件中，并从组件内调用该函数。

这样，数组中每个项目的加载状态将是其自己的组件的本地状态。

【讨论】：

我不明白，为什么这个解决方案的投票较少。但从架构的角度来看，它绝对是正确且清晰的。只需将所有内容，表格内部的内容分配给子组件，您就不会遇到这个问题。

【解决方案3】：

您为所有行使用单个数据属性，因此在挂载钩子中为每一行添加一个名为 loading 的属性，如：

mounted(){
   this.getReportInfo=this.getReportInfo.map(rep=>{
               rep.loading=false;
             return rep;
         });
}

模板做：

   <tr v-for="(item,index) in getReportInfo" :key="index">
                            <td>{{ item.id }}</td>
                            <td>{{ item.periodFrom }}</td>
                            <td>{{ item.periodTo }}</td>
                            <td><v-btn  class="primary" :loading="item.loading" :disabled="loading"  @click="fetchGetReportDetailed(item,index)" >{{ $t('message.printButton')}}</v-btn></td>
                        </tr>

在fetchGetReportDetailed 方法中：

fetchGetReportDetailed(item,index){

....

this.getReportInfo[index].loading=true;
this.$set(this.getReportInfo,index,this.getReportInfo[index])
}

【讨论】：

使用列表中项目的index。

使用列表中项目的`index`。