传递给组件的道具不会呈现答案

【问题标题】：Props passed into a a component do not render传递给组件的道具不会呈现
【发布时间】：2020-01-17 21:12:57
【问题描述】：

我正在将一些数据值传递给一个组件，但是当我尝试渲染该组件时，没有正确接收到数据。我收到一条错误消息：

无法读取 Proxy.render 处未定义的属性“标题”（eval at ./node_modules/cache-loader/dist/cjs.js?

我确信我尝试接收的数据是正确的，因为一秒钟后数据会正确加载到页面上。但是，我需要在页面加载时加载数据，因为我计划实现编辑功能。我在整个项目的不同部分都做了类似的事情，而且效果很好。我不确定为什么这里会抛出错误。

我试图更改识别数据的时间点，传递具体的数据值等。但没有任何效果。

组件：

<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>

家长：

<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());
        })
    }
}

我希望当我在已安装部分的组件中记录相关数据时，我应该能够立即看到所有数据。

【问题讨论】：

去掉这个，只使用
{{relatedData.title }}

标签： javascript firebase vue.js

【解决方案1】：

如果您需要数据存在于 mounted 挂钩中，那么您需要使用 v-if 来延迟组件的创建：

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

如果没有v-if，Content 组件将在从您的服务器加载 sidebarData 之前立即创建和呈现。

【讨论】：

{{relatedData.title }}