如何使整行可点击？

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

我怎样才能使整个行可点击的，不只是有路由器链路的按钮？

来源

2017-07-26 Catarina Nogueira

这是否回答你的问题：https://stackoverflow.com/questions/17147821/how-to-make-a-whole-row-in-a-table-clickable-as-a-link？ –

不，我已经看到这个链接 –

但是，你使用任何JS库，像JQuery？或者你是否使用JS？ –

添加点击监听器上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元素。

来源

2017-07-26 14:46:14 thanksd

woow，我是一个vuejs begginer，甚至不知道存在！非常感谢！！我会更多地研究它。 –

如何使整行可点击？

回答

相关问题