значение модели не обновляет пользовательский интерфейс флажка в vue.js laravel 5.8

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

IЯ могу получить правильные значения true и false на проверенных или не проверенных корректно.Но значение модели не обновляет пользовательский интерфейс флажка

Answer 1

Согласно vue js docs вам не нужно указывать метод @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>

Answer 2

Проблема в вашем коде. V-модель vue.js автоматически обновляет данные вашего флажка.В вашем случае значение меняется дважды, один раз по 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>