Vue lost reactivity

Question

Can't understand why this simple things not reactive. Looks like I'm missed some Vue's basis.

<template>
    <div>
        {{connection_status}}
    </div>
</template>
<script>
export default {
    data() {
        return {
            connection_status: 'loading',
        };
    },
    created() {
        Echo.connector.socket.on('connect', function(){
            this.connection_status = 'connected'; 
            console.log(this.connection_status );   
        });
        Echo.connector.socket.on('disconnect', function(){
            this.connection_status = 'disconnected'; 
            console.log(this.connection_status );   
        });
    },  
}
</script> 

Echo runs throught socket.io and works correct. All events triggers in time.

Console output when connected:

connected

But on page

loading

Same thing when disconnected triggers. In console:

disconnected

On page

loading

Answer 1

Your problem is that this inside the callback function doesn't refer to the Vue instance. You should use an arrow function instead ..

created() {
        Echo.connector.socket.on('connect', ()=>{
            this.connection_status = 'connected';
            console.log(this.connection_status );   
        });
        Echo.connector.socket.on('disconnect', ()=>{
            this.connection_status = 'disconnected'; 
            console.log(this.connection_status );   
    });
},

Or you could assign this to a variable and use it in the callback function ..

created() {
        const vm = this;
        Echo.connector.socket.on('connect', function(){
            vm.connection_status = 'connected';
            console.log(vm.connection_status );   
        });
        Echo.connector.socket.on('disconnect', function(){
            vm.connection_status = 'disconnected'; 
            console.log(vm.connection_status );   
    });
},