[Vuejs]-Vuejs table router-link tag a

by

0👍

✅

What you’re trying to do wont work, as a table has a set structure, which doesn’t allow for an <a> tag to be a child of <tbody>.

What you instead can do is use position: absolute to "stretch" your link to the entire row, basically placing it above all the other content. Just be aware that doing so will cancel out all other interactive content within your table. Like buttons and inputs.

I’ve copied the class/css from Bootstrap, but it should work even if you aren’t using it.

Just remember to place position: relative; on your <tr> so the link will be properly contained within each row.

new Vue({
  el: '#app',
  data() {
    return {
      userList: [{
          id: 1,
          name: "Prem",
          age: 18,
          status: "close",
          gender: "male",
        },
        {
          id: 2,
          name: "Chandu",
          status: "close",
          age: 20,
          gender: "female",
        },
        {
          id: 3,
          name: "Shravya",
          status: "open",
          age: 35,
          gender: "female",
        }
      ]
    }
  }
});
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}

.position-relative {
  position: relative;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>

<div id="app" style="padding: 1rem;">
  <table class="table table-hover table-striped table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Status</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(user, i) in userList" class="position-relative">
        <td>{{ user.name }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.status }}</td>
        <td>
          {{ user.gender }}
          <!-- This can be placed in any of the <td>'s -->
          <a class="stretched-link" :href="`#${user.id}`"></a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

0👍

Maybe this problem just occurres, because you are trying to use an <a> tag as a wrapper for your <td> instead of the <tr>.

Maybe instead you add another <td> to your table to display the UserDetail there. This could be something like this:

<table>
<thead>
<tr>
  <th>Name</th>
  <th>Age</th>
  <th>Status</th>
  <th>Gender</th>
  <th>Details</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, i) in userList" :key="i">
  <td>{{ user.name }}</td>
  <td>{{ user.age }}</td>
  <td>{{ user.status }}</td>
  <td>{{ user.gender }}</td>
  <td>
    <router-link
        tag="a"
        :to="{ name: 'UserDetail', params: { id:user.id }}"
    >
      Show Details
    </router-link>
  </td>
</tr>
</tbody>
</table>

Leave a comment