javascript - Vue.js:允许在td中的任何位置单击td中的复选框

我的问题是一个非常简单的问题，必须有一个简单的解决方案。
我有一张桌子，每行都有一个复选框。

<tr v-repeat="claim: claims">
    <td  v-on="click: claim.selected = !claim.selected">
        <input  v-model="claim.selected" type="checkbox">
    </td>
</tr>

问题是，当在td中单击输入时，它可以工作，但是当我直接单击输入时，由于周围td的单击，它会自动被取消选择。有没有人有办法解决吗？

最佳答案

将代码移到方法中，并在事件上调用.stopPropagation()。像这样：

<tr v-repeat="claim: claims">
    <td  v-on="click: clicked">
        <input  v-model="claim.selected" type="checkbox">
    </td>
</tr>

使用代码：

[...]
methods: {
    clicked: function (event) {
        this.claim.selected = !this.claim.selected;
        event.stopPropagation();
    }
}
[...]