如何使整行可点击?
Posted
技术标签:
【中文标题】如何使整行可点击?【英文标题】: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>
如何使整行都可点击,而不仅仅是具有路由器链接的按钮?
【问题讨论】:
这是否回答了您的问题:***.com/questions/17147821/… ? 不,我已经看过这个链接了 但是,您是否使用任何 JS 库,例如 JQuery?还是你根本用JS? 我正在使用 Vuejs,当我把它放在链接中时,你发送的所有 mdl 表设计都损坏了,我无法修复它:/ 【参考方案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
标签以上是关于如何使整行可点击?的主要内容,如果未能解决你的问题,请参考以下文章