iterate with v-for and data-attribute

Question

I have a vuejs-datatable, and now I want to have an option-column with edit- / delete-links.

This is the table-body which gets iterated from the function 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>  

Now the td with the {{row.id}} and {{row.email}} are fine. However the :data-id="row.id" displays only the id of the first entry. Links in every row in my table have the same data-id. I do not understand why this is happening and what am I doing wrong.

Answer 1

Use code below (notice, it's not using 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>