Question

我正在从Firebase抓取一些数据以显示在我的网页上。正确加载文本后，控制台中不断出现错误，提示我正在加载未定义的变量。这很重要，因为我最终希望能够添加编辑功能。我确定在加载DOM后正在渲染Firebase调用，并且最初将数据设置为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>

NB： null和""是已定义的数据，不应引起任何渲染问题……请确保doc.data()不是{{1} }

在Firebase完成之前渲染DOM

1 个答案: