[Vuejs]-Cant access to props in mounted

3👍

This is an expected behavior due to the component life cycle, the child component is mounted before the form.id is available, the mounted hook is executed once but the template will be re-rendered when form.id is available, to use this prop in your script you should use it with computed or watch option like :

<template>
    <div>
        <h3> Test : {{form.id}} </h3>
    </div>
</template>

<script>
export default {
    props : ['form'],
    watch:{
       form(newVal,oldVal){
            console.log('watch : ',this.form.id)  //if you check the console you'll see
                                                  // watch : undefined
                                                   // watch : "your value" 
        }
    }, 
    mounted : function () {
        console.log(this.form.id); // !!! this.form.id is undefined!
    }
}
</script>

<style scoped>
</style>

Leave a comment