Блог

Я извлекаю данные firestore и заполняю интерфейс с помощью Vuejs. К сожалению, innerHTML не обновляется, и я застрял на 3 часа, но до сих пор не знаю, где я ошибся.

HTML

 <section>
        <div v-html="boardDetails"></div>
</section>
 

Vuejs

 Vue.component('dashboard', {
    template: '#dashboard',
    data() {
        return {
            boardDetails: ''
        }
    },
    mounted(){
        var studIdentity, studName, studEmail, photoUrl, uid, emailVerified;

        firebase.auth().onAuthStateChanged(function (user) {
            if (user) {
                studIdentity = user;
                if (studIdentity != null) {
                    studName = studIdentity.displayName;
                    studEmail = studIdentity.email;
                    photoUrl = studIdentity.photoURL;
                    emailVerified = studIdentity.emailVerified;
                    uid = studIdentity.uid;
                }

                var boardId = [];
                ref_du.get().then(function (snapshot) {
                    snapshot.forEach(childSnapshot => {
                        let data = childSnapshot.data();
                        let st_id = childSnapshot.id;
                        let userId = data.studId;

                        if (userId == uid) {
                            boardId.push({ st_id: st_id, t_id: data.taskboardId });
                        }
                    });
                });

                var boardInfo = []
                du.get().then(function (snapshot) {
                    snapshot.forEach(childSnapshot => {
                        let data = childSnapshot.data();
                        let t_id = childSnapshot.id;

                        for (let i = 0; i < boardId.length; i  ) {
                            if (boardId[i].t_id == t_id) {
                                boardInfo.push({ t_id: t_id, name: data.taskboardName, date: data.createdDate });
                            }
                        }
                    });

                    let html = '';
                    for (let i = 0; i < boardInfo.length; i  ) {
                        html  = `
                <div style="color:red;">${boardInfo[i].name}</div>
            `;
                    }
                    this.boardDetails = html;
                    console.log(this.boardDetails);
                });

            } else {
                window.location.href = 'index.html';
            }
        });
        
    }
});
 

Журнал консоли показывает, что boardDetails обновлен, но интерфейс ничего не показывает.

Когда вы используете function ключевое слово, оно изменяет this контекст.

Чтобы устранить вашу проблему, добавьте var self = this; вверху mounted , а затем замените все, что у вас есть this.boardDetails , на self.boardDetails