Vue.js.有条件渲染时出错。属性或方法未在实例上定义，但在渲染过程中引用

以下代码会产生错误。我想有一个有关接收事件的条件呈现。我在main.jsVue.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')"

来源

2017-10-17 Alex Pilugin

这是哪个错误？在你的标题或你的问题中的一个？ – Phil

您对数据的定义是错误的。你命名方法'date（）'而不是'data（）'。 – cello

this.viz.isVisible在事件处理函数中（在方法setVisability中）未定义，而在v-if =“viz.isVisible”中也有“属性或方法”，即“undefined –

您有一个错字：返回数据的方法应命名为data()，但您将其命名为date()。

由于名称错误，没有为vue组件定义数据成员，因此this.viz未定义，这就是错误消息声称this.viz未定义的对象，它不得不具有的对象成员isVisible。

来源

2017-10-17 07:49:24 cello

Vue.js.有条件渲染时出错。属性或方法未在实例上定义，但在渲染过程中引用

回答

相关问题