模型值未更新 vue.js laravel 5.8 中复选框的 UI答案

【问题标题】：model value is not updating the UI of checkbox in vue.js laravel 5.8模型值未更新 vue.js laravel 5.8 中复选框的 UI
【发布时间】：2019-09-20 14:31:25
【问题描述】：

下面是我在 Vue.js 和 Laravel 5.8 中的组件

<template>    
    <div class="container">
        <input 
            type="checkbox"
            @change="validateBeforeSubmit()"
            v-model="accountSecurityForm.checked">
    </div>
</template>

<script>
    export default {        
        data() {
            return { 
                accountSecurityForm: {
                    checked: false
                }
            }
        },
        methods: {
            validateBeforeSubmit() {
                debugger;
                this.accountSecurityForm.checked = !this.accountSecurityForm.checked;
            },
        }
    }
</script>

我正在尝试在复选框的值更改时设置复选框的值。

我的一行代码出现在method:validateBeforeSubmit

但是，这不起作用，我错过了什么吗？

更新 - 1

我能够在正确选中或未选中时获得正确的真假值。但是模型值没有更新复选框的UI

【问题讨论】：

标签： vue.js vue-component laravel-5.7 laravel-5.8

【解决方案1】：

问题出在您的代码中。vue.js v-model 会自动更新您的复选框数据。在您的情况下，该值更改了两次，一次是通过 v-model，第二次是通过“method:validateBeforeSubmit”。

把你的代码改成这样：

<template>    
    <div class="container">
        <input 
            type="checkbox"
            v-model="accountSecurityForm.checked">
    </div>
</template>
<script>
    export default {        
        data() {
            return { 
                accountSecurityForm: {
                    checked: false
                }
            }
        },
    }
</script>

【讨论】：

【解决方案2】：

根据 vue js 文档，您不需要为输入添加 @change 方法。在输入更改时，其模型将自动触发和更新。请删除@change="validateBeforeSubmit()"

<template>    
    <div class="container">
        <input type="checkbox" v-model="accountSecurityForm.checked">
    </div>
</template>
<script>
    export default {        
        data() {
            return { 
                accountSecurityForm: {
                    checked: false
                }
            }
        }
    }
</script>

【讨论】：