如何使整行可点击？答案

【问题标题】：How to make the whole row clickable?如何使整行可点击？
【发布时间】：2018-01-01 22:44:54
【问题描述】：

我正在使用 Vue 并且拥有：

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

如何使整行都可点击，而不仅仅是具有路由器链接的按钮？

【问题讨论】：

这是否回答了您的问题：stackoverflow.com/questions/17147821/… ?
不，我已经看过这个链接了
但是，您是否使用任何 JS 库，例如 JQuery？还是你根本用JS？
我正在使用 Vuejs，当我把它放在链接中时，你发送的所有 mdl 表设计都损坏了，我无法修复它：/

标签： javascript html routes vue.js

【解决方案1】：

在tr 和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 } });
  }
}

或者，您可以将v-for 放在<router-link> 上，并将tag 属性设置为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>

将标签指定为tr 会将组件呈现为tr 元素。

【讨论】：

哇，我是 vuejs 的初学者，甚至不知道它的存在！非常感谢！！我会为此进行更多研究。
将tag 属性添加到您的<router-link> 不会使其可点击，它只能让您将active 类应用于<a> 标记的外部元素（documentation )。
标签属性已在 vue router 4 insted 中被弃用 custom 标签