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

Question

有一个表循环并输出来自 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>                    

但是当我单击特定按钮时，所有按钮都进入加载模式。我如何解决它？任何建议将不胜感激。这是视觉示例

Answer 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您可以创建一个方法，该方法将根据条件返回 true 或 false loading && this.indexClicked === index。

祝你好运！