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();
    }
}
[...]

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

Vue.js: Allow a checkbox in a td to be clickable anywhere in the td

javascript

vue.js