javascript - 如何使整行可点击？

Question

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

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

Answer 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元素。