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

Question

我的问题很简单，一定有一个简单的解决方案。我有一张 table ，每行都有一个复选框。

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

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

Answer 1

将代码移至方法中并在事件上调用 .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();
    }
}
[...]