v-model绑定checkbox无法动态更新视图

在vue2中使用v-model绑定checkbox

            <input type="checkbox" v-model="isChecked" :value='isChecked' @change="handleCheckboxChange" />

监听change事件,并在change事件中做一些特殊处理,比如用户在登录时有没有阅读过隐私协议,在此之前有没有先填写手机号,如果没有通过校验,对于checkbox选中状态下应该取消选中。

问题

<body>
    <div id="app">
        <div>
            <input type="checkbox" v-model="isChecked" :value='isChecked' @change="handleCheckboxChange" />
            <label>{{ isChecked }}</label>
        </div>
    </div>
</body>

</html>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                isChecked: false
            };
        },
        methods: {
            handleCheckboxChange() {
                console.log("checkbox ===>now:" + this.isChecked)
                this.isChecked = !this.isChecked;
                console.log("run[this.isChecked = !this.isChecked;] checkbox ===>now:" + this.isChecked)

            }
        }
    })
</script>

v-model绑定checkbox无法动态更新视图_第1张图片
再执行this.isChecked = !this.isChecked后,checkbox的状态依旧是选中状态,并没有动态更新视图,v-model绑定的值为false,但是依旧是选中状态

为什么

首先来看v-model对于checkbox的原理:
v-model绑定checkbox无法动态更新视图_第2张图片
v-model对于checkbox是实现的checked与change事件的结合(语法糖),通过代码我们也可以看出,属性已经很好的完成了响应的变化,这就可能是由于html元素input本身的原因了,再去看一下checkbox的属性:
v-model绑定checkbox无法动态更新视图_第3张图片可以发现,checked只会在首次渲染,随后的checked值改变不再反应该变化,由此可见,为什么checkbox样式框没有发生变化的原因了

解决方案

1.刷新组件,页面重新渲染

      this.$nextTick(() => {
          this.isChecked = !this.isChecked;
      });

2.绑定checkbox的value值

<input type="checkbox" :value='isChecked' @change="handleCheckboxChange" />

使用v-model没有value属性
v-model绑定checkbox无法动态更新视图_第4张图片

你可能感兴趣的:(前端,vue)