Is vuejs v-model and value worth Synchronize?

< input v text/javascript modelling password` ref="password" / >
< script type= "text/javascript" >

new Vue({
    el:".loginDiv",
    data:{
        password:""
    },
    methods:{
        submitForm:function() {
            var sha = hex_sha1(this.password);
            this.password = sha;
            console.log(this.$refs.password.value)
        }
    }
})

< / script >
Why do I execute the function submitForm and change password, while this.$refs.password.value prints out a value other than password

Jul.07,2021

read more documents dom updates are not real-time
Vue-nextTick


The

password value is updated by Synchronize, while the DOM is updated asynchronously. You can wait for the current round of DOM updates to obtain the DOM value.

this.$nextTick(() => {
    console.log(this.$refs.password.value)
})

it can be considered that this value has already told the vMurmodel, but he hasn't had time to write it on the page. At this time, you can directly fetch the value of the page, or the old value.
updating the page is an asynchronous operation, and you won't do it until you have finished executing this piece of code.

Menu