如何在Vue.js中重复jQuery按行效果？

我在codepen中找到了一张表：

这是一个代码示例：

<div id="app">
    <div class="text-uppercase text-bold">id selected: {{selected}}</div>
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>
                    <label class="form-checkbox">
    <input type="checkbox" v-model="selectAll" @click="select">
    <i class="form-icon"></i>
  </label>
                </th>
                <th>id</th>
                <th>name</th>
                <th>email</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="i in items">
                <td>
                    <label class="form-checkbox">
                        <input type="checkbox" :value="i.id" v-model="selected">
                        <i class="form-icon"></i>
                    </label>
                </td>
                <td>{{i.id}}</td>
                <td>{{i.name}}</td>
                <td>{{i.email}}</td>
            </tr>
        </tbody>
    </table>
</div>

您可以看到，当鼠标悬停在它上面时，一个活动列用一种特殊的颜色表示。从与使用jQuery事件代码生成的行相似的行中获取数据的方法是什么：

---

因此，我想再次基于Vue.js代码创建一个功能，当我按下该行的任何区域时，它将返回该行的数据。

在

tr

处为每行添加一个单击事件侦听器，并将行数据传递给事件处理程序，例如：

<tr v-for="i in items" @click="clickedRow(i.name)">

methods: {
  ...
  clickedRow(i) {
    alert('clicked row' + i)
  }
}

方法：{
...
单击箭头（i）{
警报（'单击行'+i）
}
}

---

请注意，使用此方法时，您可能需要捕获复选框上的单击事件，并防止传播。否则，您将最终调用此处理程序，同时选中复选框。非常感谢！这正是我一直在寻找的。祝您在项目中一切顺利！感谢您的支持@Sumurai8非常感谢您的评论！

<tr v-for="i in items" @click="clickedRow(i.name)">

methods: {
  ...
  clickedRow(i) {
    alert('clicked row' + i)
  }
}