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

Question

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

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

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

<template>
    <td class="role-first-category">
        <div class="checkbox">
            <label @click.prevent="menuRolePowerChange(menu)">
                <input type="checkbox" v-model="menu.checked">
                {{menu.Text}}
            </label>
        </div>
    </td>
</template>

<script>
    module.exports = {
        props: ['menu'],
        methods: {
            //去除角色权限时,给出警告
            menuRolePowerChange: function (menu) {
                if (menu.checked && menu.ID == 3) {
                    this.$dispatch('transmit','tip',{
                        name: '提示:',
                        contentText: '确定要取消角色权限吗?取消后将无法再进行权限管理!',
                        btnName: '确定',
                        events: {
                            confirm: 'cancelRolePower'
                        }
                    });
                    this.$once('cancelRolePower',function () {
                        menu.checked = false;
                    });
                } else {
                    menu.checked = !menu.checked ;
                }
            },
        }
    }
</script>

Answer 1

<template>
    <td class="role-first-category">
        <div class="checkbox">
            <label>
                <input type="checkbox" v-model="menu.checked">
                {{menu.Text}}
            </label>
        </div>
    </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>

Answer 2

<label for="my-check">
    <input type="checkbox" id="my-check" v-model="menu.checked">
    {{menu.Text}}
</label>

1L那样写比较好，实现点文字也起作用的话，给label加上for属性指向checkbox就行。