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

发布于 2022-09-02 21:05:26 字数 1658 浏览 12 评论 0

用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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

策马西风 2022-09-09 21:05:26
<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>
流年里的时光 2022-09-09 21:05:26
<label for="my-check">
    <input type="checkbox" id="my-check" v-model="menu.checked">
    {{menu.Text}}
</label>

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文