Vue.js条件付きレンダリングでエラーが発生しました。インスタンスでプロパティまたはメソッドが定義されていませんが、レンダリング中に参照されます

Question

次のコードでエラーが発生します。私はイベントを受け取ることに関する条件付きレンダリングをしたい。私はmain.js

window.eventBus = new Vue({}) 

とどこかにコード内でEventBusを持っている：

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

私は次の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 
    } 
    } 
} 

エラー：

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

Answer 1

タイプミスがあります。データを返すメソッドの名前はdata()である必要がありますが、名前はdate()です。

名前が間違っているため、vueコンポーネントにデータメンバーが定義されていないため、this.vizは定義されていません。そのため、エラーメッセージにはthis.vizが未定義であることがオブジェクトではありませんメンバーisVisible。