javascript - 传递到组件中的 Prop 不呈现

Question

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

Cannot read property 'title' of undefined at 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());
        })
    }
}

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

Answer 1

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

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

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