vue props passing from parent component to child

Question

I have a container component with a navbar component inside of it. I call an api in beforeCreate, then set variables here, and set them in vue 'state' (data), then pass those as props down to the navbar component. However, these do not appear. What am i doing wrong here?

<template>
<Navbar :title='title' />
<template>

<script>
export default{
name:'example',
data(){
    return{
        title:''
    };
},
beforeCreate: function(){
    axios.post('')
    .then(response => {
        this.title = response.title
   })
}
}
</script>

I have console logged the response data from the api, so i know it is producing data properly. I have also console logged the data variable 'title' in the mounted lifecycle, and it has data. But the props for the navbar are still empty.

Answer 1

beforeCreate is called before data observation. Try again using beforeMount

Answer 2

Simply in the beforeCreate life cycle method your data object not loaded yet so you can't call it at this time so the best practice for this to use created method

beforeCreate()

This is the very first lifecycle hook that gets called in Vue JS, it gets called immediately after the Vue instance has been initialized.

created()

the second lifecycle hook that is called right after the beforeCreated hook. At this stage, the Vue instance has been initialized and has activated the start of things like computed properties, watchers, events, data properties and manipulations that come with it.

created: function(){
    axios.post('')
    .then(response => {
        this.title = response.title
   })
}