Retrieve Firestore data and populate Vuejs but v-html update is not working

Question

I am retrieving firestore data and populate to the interface with Vuejs. Unfortunately, the innerHTML is not updated and I am stuck for 3 hours but still do not know where have I done wrong.

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

The console log shows that the boardDetails is updated but the interface does not show anything.

Answer 1

When you use the function keyword, it changes the this context.

To fix your problem, add var self = this; at the top of mounted and then replace anywhere you have this.boardDetails with self.boardDetails