Vue.js 数据加载在初始加载时失败，但在后续加载时工作

它在控制台中显示了我期望的JSON，但它不会改变UI。它仍然会给出未定义的数据错误

更新2

现在，我得到了。它在初始负载和后续负载上也会失败

编辑

您的问题在于异步加载。您正在对db.collection进行异步调用，但在进行db.collection调用后在viewModel中更新this.page。这就是为什么你的this.page没有以你希望更新的数据结束。试试这个&我想它会有用的：

    fetchData () {
        console.log("Getting content for: " + this.id);

        let data = null;


        db.collection('pages')
            .where("url", "==", this.id)
            .get()
            .then(function(querySnapshot) {
                querySnapshot.forEach(function (documentSnapshot) {
                data = documentSnapshot.data();

                });
            });
        this.page = data;

        console.log(JSON.stringify(this.page));
        }

看起来const就是我们所需要的

fetchData () {
    console.log("Getting content for: " + this.id);

    db.collection('pages')
        .where("url", "==", this.id)
        .get()
        .then(querySnapshot => {
            querySnapshot.forEach(documentSnapshot => {
                this.page = documentSnapshot.data(); //this.page will hold last documentSnapshot data
            });
        });
    }
}

---

pageload上的documentSnapshot是什么？我将其移动到mounted，其行为是相同的。我添加了let data=null；在fetchData上，现在它根本不起作用；请回答你的问题？谢谢！我想我已经找到了问题所在。请检查！

    fetchData () {
        console.log("Getting content for: " + this.id);

        let data = null;


        db.collection('pages')
            .where("url", "==", this.id)
            .get()
            .then(function(querySnapshot) {
                querySnapshot.forEach(function (documentSnapshot) {
                data = documentSnapshot.data();

                });
            });
        this.page = data;

        console.log(JSON.stringify(this.page));
        }

fetchData () {
    console.log("Getting content for: " + this.id);

    db.collection('pages')
        .where("url", "==", this.id)
        .get()
        .then(querySnapshot => {
            querySnapshot.forEach(documentSnapshot => {
                this.page = documentSnapshot.data(); //this.page will hold last documentSnapshot data
            });
        });
    }
}

    fetchData () {

        console.log("Getting content for: " + this.id);

        db.collection('pages')
            .where("url", "==", this.id)
            .get()
            .then(querySnapshot => {
                querySnapshot.forEach(doc => {
                    const {title, content} = doc.data();

                    this.title = title;
                    this.content = content;
                    });
            });

        console.log(this.title);
        }