Question

下面是我在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

我能够在选中或未选中的情况下获取正确的true和false值。但是模型值没有更新复选框的用户界面

Answer 1

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

将您的代码固定为此：

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

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

模型值未更新vue.js laravel 5.8

2 个答案: