时间戳

首页 > 解决方案 > 使用 v-for 和 data-attribute 进行迭代

vue.js - 使用 v-for 和 data-attribute 进行迭代

问题描述

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

这是从函数迭代的表体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}}and{{row.email}}都很好。但是，:data-id="row.id"仅显示id第一个条目的。我表中每一行的链接都相同data-id。我不明白为什么会发生这种情况以及我做错了什么。

标签： vue.jsvuejs2vuexv-for

解决方案

使用下面的代码（注意，它没有使用 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>

推荐阅读