Vue потерял реактивность

Question

Не могу понять, почему эти простые вещи не реагируют.Похоже, я пропустил некоторые основы Vue.

<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 запускает throught socket.io и работает правильно.Все события срабатывают во времени.

Вывод на консоль при подключении:

connected

Но на странице

loading

То же самое при отключении сработает.В консоли:

disconnected

На странице

loading

Answer 1

Ваша проблема в том, что this внутри функции обратного вызова не ссылается на экземпляр Vue.Вместо этого вы должны использовать функцию стрелки ..

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

Или вы можете присвоить this переменной и использовать ее в функции обратного вызова ..

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

Answer 2

В JavaScript функция - это объект.Использование function() {} определяет новую область видимости объекта и, следовательно, новую область видимости для this.Вы присваиваете значение свойству connection_status функции , а не компоненту vue.

Рекомендуется использовать функции со стрелками, если вам не нужна новая область действия функций, поскольку функции со стрелками наследуют this от области, в которой они определены.

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

Answer 3

Вам следует использовать крюк mount () вместо созданного (), если я хорошо понимаю документ: https://vuejs.org/v2/api/#created