Загрузка данных не выполняется при начальной загрузке, но работает при последующих загрузках

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, который я ожидаю в консоли, но это не меняет пользовательский интерфейс. Он по-прежнему выдает ошибку данных, не определенную.

Обновление 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

Похоже, const - это то, что было нужно.

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

Answer 2

EDIT

Ваша проблема с асинхронной загрузкой. Вы делаете асинхронный вызов db.collection(), но обновляете свой this.page в viewModel после выполнения db.collection() вызова. Вот почему ваш 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
            });
        });
    }
}