当前位置: 首页 > 知识库问答 >
问题:

如何使整行可点击?

江新
2023-03-14

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

我如何才能使整行可点击,而不仅仅是具有路由器链接的按钮?

共有1个答案

季稳
2023-03-14

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

 类似资料:
  • 我使用的是Bootstrap,以下操作不起作用:

  • 在列表中,我有一个从状态映射出来的用户表。当我单击该链接时,foo函数获取用户id并将其传递给Profile,List组件将被Profile组件替换,显示选定的用户配置文件 现在,单击中的链接显然有效,但我希望使整个行像可单击的 我尝试将onClick函数绑定到,但我不知道如何使它像那样替换要配置文件的组件 编辑:根据雅各布·斯密特的评论,我设法使用withRouter使其工作 > 我包括来自re

  • 问题内容: 我想使UILabel可点击。 我已经尝试过了,但是没有用: 问题答案: 你有没有尝试设置到上标签?这应该工作。

  • 我想让整个div/图都可以点击,但是我必须用Jquery来做,因为这是一个wordpress插件。目前,只有标题是可点击的,我不想转到标题激活href,我希望能够点击div/image上的任何地方,它应该转到链接。 您可以在这里看到链接https://elysian.dijestdesigns.com/voice/ 这是密码 我试着加了这个,但好像不起作用 我不是一个专业的编码器,所以在这里得到一

  • 嘿,对不起,我的英语不好。。。 我的 ListFragment 中有一个 ListView,带有自定义适配器。在我的布局中,我有一个按钮。按钮和整个项目/行是可单击的。我用为ImageButton实现了这一点。正如您在 getView() 方法中看到的,我捕获了一个单击操作。 这是我的布局: 现在我想知道你是否可以在不选择整个视图的情况下点击按钮,但仍然注意到背景上的点击(我知道我在列表视图中的位

  • 问题内容: 我正在使用Bootstrap,但以下操作无效: 问题答案: 作者注一: 请查看下面的其他答案,尤其是那些不使用jquery的答案。 作者注二: 保留后代,但肯定在2019年采用了 错误的 方法。(在2017年甚至很糟糕) 您正在使用Bootstrap,这意味着您正在使用jQuery:^),因此一种实现方法是: 当然,您不必使用href或切换位置,您可以在点击处理程序函数中执行任何操作。