数据加载在初始加载时失败，但适用于后续加载

Question

<script>
const Detail = Vue.component('Detail', {

props:  ['id'],

template:`
    <div>
        Pages: {{page}}
        <p><b>ID:</b> {{ id }}</p>

            <h1>{{page.title}}</h1>
            <div  v-if="page.content" v-html="page.content"></div>

    </div>`,

data: function() {
    return {
        page : {}
        };
    },

created () {
    console.log("Initial load with: " + this.id);
    this.fetchData(); // this does not
    },

watch: {
    '$route': 'fetchData' // this works
    },

methods: {

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


        db.collection('pages')
            .where("url", "==", this.id)
            .get()
            .then(function(querySnapshot) {
            querySnapshot.forEach(function (documentSnapshot) {
                data = documentSnapshot.data(); // I think is is what falls apart
                });
            });
        this.page = data;


        console.log(JSON.stringify(this.page));
        }
    }
}); // end component

控制台结果

更新

我添加了以下代码

        db.collection('pages')
            .where("url", "==", this.id)
            .get()
            .then(function(querySnapshot) {
                querySnapshot.forEach(function (documentSnapshot) {
                console.log(JSON.stringify(documentSnapshot.data()));
                data = documentSnapshot.data();
                });
            });
        this.page = data;

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

更新2

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

现在得到。它在初始加载时失败并且也跟进负载。

Answer 1

修改

您的问题在于异步加载。您正在拨打db.collection()的异步电话，但在拨打this.page后在viewModel中更新db.collection()。因此，这就是为什么您的this.page没有以您希望更新的数据结束的原因。尝试这个＆amp;我认为它会起作用：

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

Answer 2

看起来@Entity @Data public class User { @Id @GeneratedValue(strategy = GenerationType.SEQUENCE) private Long id; private String profileImageURI; private String profileImageURI2; } 就是所需要的。

const