问

javascript - 用vueJS绑定chekbox,在label上加点击事件改变chekbox状态，状态更改有问题，怎么办？

阿蕓发布于 2022-11-27 13:49

用vueJS绑定chekbox,在label上加点击事件改变chekbox状态。点击label的文字时，数据模型改变（checked），checkbox的选中状态也会改变。但是直接点chekbox，数据模型已经改变，但是选中状态不改变，这是怎么回事？求救！

点击label里的文字时，数据模型可以与chekbox状态对应：

点击checkbox时，无论数据模型如何变化，checkbox状态都不会改变：

2 个回答

```
<label for="my-check">
    <input type="checkbox" id="my-check" v-model="menu.checked">
    {{menu.Text}}
</label>
```
1L那样写比较好，实现点文字也起作用的话，给label加上for属性指向checkbox就行。
2022-11-27 14:38 回答

花甲墨者

<template>
    <td class="role-first-category">
        <p class="checkbox">
            <label>
                <input type="checkbox" v-model="menu.checked">
                {{menu.Text}}
            </label>
        </p>
    </td>
</template>

<script>
    export default{
        props: ['menu'],
        watch: {
            'menu.checked' (checked) {
                if (checked && this.menu.ID == 3) {
                    this.$dispatch('transmit', 'tip', {
                        name: '提示:',
                        contentText: '确定要取消角色权限吗?取消后将无法再进行权限管理!',
                        btnName: '确定',
                        events: {
                            confirm: 'cancelRolePower'
                        }
                    });
                }
            }
        }
    }
</script>

2022-11-27 14:38 回答

双鱼2502858483

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签