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.有條件渲染時出錯。屬性或方法未在實例上定義，但在渲染過程中引用

回答

相關問題