[英]How to make the whole row clickable?
我正在使用 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>
如何使整行可點擊,而不僅僅是具有路由器鏈接的按鈕?
在tr
上添加一個單擊偵聽器並以編程方式更改路由:
<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
元素。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.