I have encountered an issue in my Vue application. It seems that the child component's mounted function is being executed before the parent component's created function.
I am passing props from the parent component to the child component and I want to use these props in the child component's mounted function. However, the props are not available in mounted because they are set after created in the parent component. Can someone help me resolve this problem so that the child component can properly set this.userCopy to the prop received as this.user?
Parent Component
<template>
<div>
<Info :user="user" />
</div>
</template>
<script>
import Info from 'views/info';
export default {
components: {
Info
},
data () {
return {
user: {
first_name: '',
last_name: '',
},
errors:[]
}
},
created() {
this.fetchUsers();
},
methods: {
fetchUsers() {
this.$axios.get('/user.json')
.then(response => {
this.user = response.data;
}).catch(error => {
this.errors = error.response.data.error;
});
},
}
}
</script>
Child Component
<template>
<div>
{{userCopy}}
</div>
</template>
<script>
export default {
props: ['user'],
data () {
return {
userCopy: {}
}
},
mounted: function() {
var that = this;
this.userCopy = this.user
}
}
</script>