DOM 在 Firebase 完成之前渲染

Question

我正在从 Firebase 获取一些数据以显示在我的网页上。正确加载文本时，我的控制台中不断出现错误，提示我正在加载未定义的变量。这很重要，因为我最终希望能够添加编辑功能。我确定 Firebase 调用是在加载 DOM 后呈现的，并且数据最初设置为 null。

我尝试使用不同的生命周期挂钩，但没有一个会等到 Firebase 调用完成。我对 Javascript 没有那么丰富的经验，所以我可能会遗漏一些简单的东西。

created(){
    db.collection('recipes').doc("Grilled Cheese").get()
        .then((doc) => {
            this.contentData = doc.data();
        })
}

data() {
    return {
        sidebarData: null,
        contentData: "",
    }
},

我想在 DOM 完全呈现之前用正确的值填充 contentData。

Answer 1

知道您不能在创建的挂钩结束后强制执行挂载的挂钩（DOM 渲染不会等待您的 firebase 响应）...您需要在模板上添加条件 v-if 所以只有如果数据可用（不是undefined），DOM 将被渲染。

<template v-if="contentData">...</template>

注意： null 和 "" 是已定义的数据，不会导致任何渲染问题...确保 doc.data() 不是 undefined