Javascript 如何使整行可单击？

我正在使用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>

{{blabla.id}
{{blabla.username}
{{blabla.name}
细节

---

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

在

tr

上添加一个点击侦听器，并：

---

或者，您可以将

v-for

放在

上，并将

标记设置为
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>


{{blabla.id}
{{blabla.username}
{{blabla.name}
细节

将标记指定为
tr
会将组件呈现为
tr
元素。
这是否回答了您的问题：？不，我已经看到了这个链接，但是，您是否使用任何JS库，比如JQuery？或者你在使用JS吗？我在使用Vuejs，当我在链接中添加这样的内容时，你发送的所有mdl表格设计都已损坏，我无法修复它：/woow，我是Vuejs中的乞丐，甚至不知道它的存在！！非常感谢！！我将对此进行更多研究。将
标记
属性添加到
不会使其可单击，它只允许您将
活动
类应用于
的外部元素。
<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>