使用 v-for 和数据属性进行迭代

Question

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

这是从函数 getRows():

迭代得到的 table-body

<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。我的 table 中每一行的链接都具有相同的 data-id。我不明白为什么会这样，我做错了什么。

Answer 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>

使用 v-for 和数据属性进行迭代

iterate with v-for and data-attribute

vue.js

vuex

vuejs2

v-for