How to make the whole row clickable?

Question

I am using Vue and have:

<tr v-for="(blabla, index) in data">
  <td>{{ blabla.id }}</td>
  <td>{{ blabla.username }}</td>
  <td>{{ blabla.name }}</td>
  <td>
    <router-link 
      :to="{ name: 'name', params: { blabla: blabla.id } }"
      class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
    >
      Details
    </router-link>                     
  </td>                    
</tr>

How can I make the whole row clickable, not just the button that has the router link?

Does this answer your question: https://stackoverflow.com/questions/17147821/how-to-make-a-whole-row-in-a-table-clickable-as-a-link ? — henrique romao, Jul 26 '17 at 14:37
But, are you using any JS lib, like JQuery? Or are you using JS at all? — henrique romao, Jul 26 '17 at 14:39
I am using Vuejs, and when i put this like in the link you have send all mdl table design broke and i just cant fix it :/ — Catarina Nogueira, Jul 26 '17 at 14:45

thanksd · Accepted Answer · 2017-07-26T15:03:24.953

23

Add a click listener on the tr and change the route programmatically:

<tr v-for="(blabla, index) in data" @click="goToBlabla(blabla.id)">
  <td>{{ blabla.id }}</td>
  <td>{{ blabla.username }}</td>
  <td>{{ blabla.name }}</td>
  <td>
    <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
      Details
    </a>                     
  </td>                    
</tr>

methods: {
  goToBlabla(id) {
    this.$router.push({ name: 'name', params: { blabla: id } });
  }
}

Alternately, you could put the v-for on a <router-link> with the tag property set to tr:

<router-link 
  v-for="(blabla, index) in data" 
  :to="{ name: 'name', params: { blabla: blabla.id } }"
  tag="tr"
>
  <td>{{ blabla.id }}</td>
  <td>{{ blabla.username }}</td>
  <td>{{ blabla.name }}</td>
  <td>
    <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
      Details
    </a>                     
  </td>                    
</router-link>

Specifying the tag as tr will render the component as a tr element.

edited Jul 26 '17 at 15:03

answered Jul 26 '17 at 14:46

thanksd

54,176
22
157
150

woow, i am a begginer in vuejs, and don't even know that that exists!! Many many thanks!! I will research more for it. – Catarina Nogueira Jul 26 '17 at 15:01
Adding a `tag` property to your `` does not make it clickable, it only enables you to apply the `active` class to the outer element of your `` tag ([documentation](https://router.vuejs.org/api/#router-link)). – Martijn Sep 13 '18 at 08:32
tag property has been deprecated in vue router 4 insted use `custom` tag – Vaibhav Phutane Dec 10 '21 at 08:06
@VaibhavPhutane how should it be? `custom` is for many usages – genuinefafa May 04 '22 at 21:54

How to make the whole row clickable?

1 Answers1