Vue.js. Erreur dans le rendu conditionnel. Propriété ou méthode n'est pas définie sur l'instance mais référencée pendant le rendu

Question

Le code suivant génère une erreur. Je veux avoir un rendu conditionnel concernant la réception d'un événement. J'ai un EventBus dans les main.js

window.eventBus = new Vue({}) 

et quelque part dans le code:

window.eventBus.$emit('change-visibility', true) 

Je me attends à déclencher la visibilité du composant suivant Vue:

<template> 
    <div> 

    <div v-if="viz.isVisible"> 
     <h2>VISIBLE</h2> 
    </div> 

    <div v-else> 
     <h1>NOT VISIBLE</h1> 
    </div> 

    </div> 
</template> 

<script> 
export default { 
    name: 'test', 
    date() { 
    return { 
     viz: { 
     isVisible: false 
     } 
    } 
    }, 
    created() { 
    const self = this; 
    window.eventBus.$on('change-visibility', status => { 
     console.log('RECEIVED EVENT', status) 
     self.setVisability(status) 
    }), 
    }, 
    methods: { 
    setVisability(ok) { 
     console.log('SET VISABILITY-----------------', ok) 
     this.viz.isVisible = ok 
    } 
    } 
} 

Erreur:

[Vue warn]: Error in event handler for "change-visibility": "TypeError: undefined is not an object (evaluating 'this.viz.isVisible = ok')"

Answer 1

Vous avez une faute de frappe: La méthode renvoyant les données doit s'appeler data(), mais vous l'avez appelée date(). En raison d'un mauvais nom, aucun membre de données n'est défini pour le composant vue, et donc this.viz est indéfini, ce qui explique pourquoi le message d'erreur indique que this.viz n'est pas un objet, ce qui devrait être le cas un membre isVisible.