Props passed into a a component do not render

Question

I am passing some data values into a component but when I try to render that component, the data is not received correctly. I get an error stating:

Cannot read property 'title' of undefined at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?

I am sure the data I am attempting to receive is correct because after a second the data loads on the page correctly. However I need the data to load on page load because I plan on implementing an edit feature. I have done things similar to this throughout my project in different sections and it works perfectly. I am not sure why an error is being thrown here though.

I have attempted to change at what point the data is recognized, passing in concrete data values, etc. But nothing has worked.

Component:

<template>
    <div class="column">
        <h1 class="title">{{ this.relevantData.title }}</h1>
        <div class="buttons are-large">
            <a class="button is-info is-outlined" @click="journalPush()">Journal</a>
            <a class="button is-success">Edit</a>
        </div>
    </div>
</template>
<script>
    import router from "@/router.js";

    export default {
    props: ['relevantData'],
    methods: {
        journalPush() {
            router.push("/recipes/" + this.relevantData.documentID + "/journal");
        }
    },
    mounted() {
        console.log(this.relevantData);
    }
}
</script>

Parent:

<template>
    <section class="overall">
        <div class="is-mobile">
        <div class="columns">
            <Content :relevantData="sidebarData"/>
        </div>
        </div>
    </section>
</template>

<script>
// @ is an alias to /src
import Content from '@/components/recipes/contentComponent.vue';

import { db } from '@/main.js'

export default {
    data() {
        return {
            sidebarData: null,
        }
    },
    components: {
        Sidebar,
    },

    created(){
        db.collection('recipes').orderBy('dateMade', 'desc').get()
        .then((snapshot) => {
            this.sidebarData = snapshot.docs.map(doc => doc.data());
        })
    }
}

I expect when I log relevantData in the component in the mounted section, I should be able to see all the data immediately.

Answer 1

If you need the data to exist in the mounted hook then you'll need to use a v-if to delay the creation of the component:

<Content v-if="sidebarData" :relevantData="sidebarData"/>

Without the v-if the Content component will be created and rendered immediately, before the sidebarData has loaded from your server.