1
votes

Vue perdue en réactivité

Je ne comprends pas pourquoi ces choses simples ne sont pas réactives. On dirait que j'ai manqué une partie de la base de Vue.

loading

Echo fonctionne via socket.io et fonctionne correctement. Tous les événements se déclenchent dans le temps.

Sortie de la console une fois connecté:

disconnected

Mais sur la page

loading

Même chose lorsque les déclencheurs sont déconnectés. Dans la console:

connected

Sur la page

<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>

javascript vue.js vuejs2 reactive-programming socket.io

0 commentaires

3 Réponses :

0
votes

Vous devriez utiliser le hook monté () au lieu de celui created () si je comprends bien la documentation: https://vuejs.org/v2/api/#created

0 commentaires

3
votes

Votre problème est que ce dans la fonction de rappel ne fait pas référence à l'instance de Vue. Vous devriez utiliser une fonction de flèche à la place.

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

Ou vous pouvez attribuer this à une variable et l'utiliser dans la fonction de rappel ..

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

0 commentaires

1
votes

En javascript, une fonction est un objet. L'utilisation de function () {} définit une nouvelle portée d'objet et donc une nouvelle portée pour this . Vous affectez la valeur à la propriété connection_status sur la fonction , pas à votre composant vue.

La meilleure pratique consiste à utiliser les fonctions fléchées, sauf si vous avez besoin d'une nouvelle portée de fonction, car les fonctions fléchées héritent ceci de la portée dans laquelle elles sont définies.

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

0 commentaires