使用 v-for 和 data-attribute 进行迭代答案

【问题标题】：iterate with v-for and data-attribute使用 v-for 和 data-attribute 进行迭代
【发布时间】：2021-07-30 04:23:51
【问题描述】：

我有一个 vuejs-datatable，现在我想要一个带有编辑/删除链接的选项列。

这是从函数getRows()迭代得到的表体：

<tbody>
  <tr v-for="(row, idr) in get_rows()" v-bind:key="idr">
    <td>{{row.id}}</td>
    <td>{{row.email}}</td>
    <td>
      <a href="#" class="tblLink text-warning" :data-id="row.id" @click="userEdit"><b-icon-pencil-square></b-icon-pencil-square></a>
      <a href="#" class="tblLink text-danger" :data-id="row.id" @click="userDelete"><b-icon-trash></b-icon-trash></a>
    </td>
  </tr>
</tbody>

现在td 与{{row.id}} 和{{row.email}} 没问题。但是:data-id="row.id" 仅显示第一个条目的id。我表中每一行的链接都有相同的data-id。我不明白为什么会发生这种情况以及我做错了什么。

【问题讨论】：

不使用 data-id，只需将 row.id 传递给 userEdit(row.id) 和 userDelete(row.id)。
这有点不相关，但是当您将其用作数据的表示形式时，您应该使用计算属性而不是方法。所以我建议将 get_rows 更改为计算

标签： vue.js vuejs2 vuex v-for

【解决方案1】：

使用下面的代码（注意，它没有使用 data-id）：

<tbody>
  <tr v-for="(row, idr) in get_rows()" v-bind:key="idr">
    <td>{{row.id}}</td>
    <td>{{row.email}}</td>
    <td>
      <a href="#" class="tblLink text-warning" @click="userEdit(row.id)"><b-icon-pencil-square></b-icon-pencil-square></a>
      <a href="#" class="tblLink text-danger" @click="userDelete(row.id)"><b-icon-trash></b-icon-trash></a>
    </td>
  </tr>
</tbody>

【讨论】：

您能否参考文档或教程来解释为什么他不能使用data-id？