Why props given from parent don't actualise in child VueJS?

Question

I am a beginner in VueJS and I am facing a problem.

Here in main.js I pass the user variable to App.vue via a props. By default its value is {}

In main.js the getLoginStatus() method listens to the firebase authentication status, when a user logs in or out main.js.this.user changes.

user in main.js is passed to App.vue thanks to template, but when it changes as a result of the getLoginStatus() call it is not changed in App.vue (the child), whereas in main.js it does change.

How can this be done? Thanks

My main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import firebase from "firebase";
Vue.config.productionTip = false

var firebaseConfig = {
    CONFIGURATION
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

new Vue({
    el: '#app',
    router,
    template: '<App :user="user" ></App>',
    components: { App },

    data(){
        return {
            user : {}
        }
    },
    methods:{
        getLoginStatus(){
            firebase.auth().onAuthStateChanged(function(u) {
                if (u) {
                    this.user = u
                    console.log("// User is signed in by Phone Number : ", u.phoneNumber)

                } else {
                    this.user = null
                    console.log("// No user is signed in.")
                }
            });
            console.log("this.user new value : "+this.user);
        },
    },
    updated(){
        this.getLoginStatus()
    },
    created(){
        this.getLoginStatus()
    }
})

App.vue:

<template>
    <div id="app">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <router-link class="nav-link" to="/">Home</router-link>
                    </li>
                    <li class="nav-item">
                        <router-link class="nav-link" to="/register">Register/About old</router-link>
                    </li>
                    <li class="nav-item">
                        <router-link class="nav-link" to="/dashboard">Dashboard</router-link>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link btn" @click="logout">Logout</button>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="container mt-5">
            <router-view />
        </div>
        <p v-if="user">logged{{user}}</p>
        <p v-else>not logged{{user}}</p>

    </div>
</template>

<script>
    import firebase from 'firebase'
    export default {
        name: 'app',
        props: ['user'],
        methods:{
            logout() {
                firebase
                    .auth()
                    .signOut()
                    .then(() => {
                        alert('Successfully logged out');
                        if(this.$router.currentRoute.path!='/'){
                            this.$router.push('/')
                        }
                    })
                    .catch(error => {
                        alert(error.message);
                        if(this.$router.currentRoute.path!='/'){
                            this.$router.push('/')
                        }
                    });
            },
        },
    }
</script>

Answer 1

You're using an unbound function here:

firebase.auth().onAuthStateChanged(function(u) {

So when setting this.user inside this function, this is not pointing to your Vue instance. You can either .bind(this) your function or just use an arrow function which will auto bind:

firebase.auth().onAuthStateChanged(u => {