[Vue的警告]：屬性或方法「郵件」的實例不定義，但引用期間呈現

用於測試目的我測試VueJs其中用戶將發送一些消息，並且消息將被渲染通過部件主頁。[Vue的警告]：屬性或方法「郵件」的實例不定義，但引用期間呈現

在這裏，我已經使用三種組分..但當我發送我看到以下message..on控制檯消息：

[Vue的警告]：屬性或方法「消息」未在規定實例，但期間呈現參考。

[Vue警告]：屬性或方法「addMessage」未在實例上定義，但在渲染過程中被引用。確保在數據選項中聲明反應性數據屬性。

這裏是刀片頁：

<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Chatroom</title> 

     <link rel="stylesheet" href="css/app.css"> 
    </head> 
    <body> 
     <div id="app"> 
      <h1>Chatroom</h1> 
      <chat-log :messages="messages"></chat-log> 
      <chat-composer v-on:messagesent="addMessage"></chat-composer> 
     </div> 
     <script src="js/app.js" charset="utf-8"></script> 
    </body> 
</html>

這裏是ChatMessage.vue組件：

<template lang="html"> 
    <div class="chat-message"> 
    <p>{{ message.message }}</p> 
    <small>{{ message.user }}</small> 
    </div> 
</template> 

<script> 
export default { 
    props: ['message'] 
} 
</script> 

<style lang="css"> 
.chat-message { 
    padding: 1rem; 
} 
.chat-message > p { 
    margin-bottom: .5rem; 
}

ChatLog.vue

<template lang="html"> 
    <div class="chat-log"> 
     <chat-message v-for="message in messages" :message="message"></chat-message> 
    </div> 
</template> 

<script> 
export default { 
    props: ['messages'] 
} 
</script> 

<style lang="css"> 
.chat-log .chat-message:nth-child(even) { 
    background-color: #ccc; 
}

ChatComposer.vue

個

<template lang="html"> 
    <div class="chat-composer"> 
     <input type="text" placeholder="Start typing your message..." v-model="messageText" @keyup.enter="sendMessage"> 
     <button class="btn btn-primary" @click="sendMessage">Send</button> 
    </div> 
</template> 

<script> 
export default { 
    data() { 
     return { 
      messageText: '' 
     } 
    }, 
    methods: { 
     sendMessage() { 
      this.$emit('messagesent', { 
       message: this.messageText, 
       user: "John Doe" 
      }); 
      this.messageText = ''; 
     } 
    } 
} 
</script> 

<style lang="css"> 
.chat-composer { 
    display: flex; 
} 
.chat-composer input { 
    flex: 1 auto; 
} 
.chat-composer button { 
    border-radius: 0; 
} 
</style>

app.js（主要VUE js文件）

require('./bootstrap'); 
Vue.component('example', require('./components/Example.vue')); 

Vue.component('chat-message', require('./components/ChatMessage.vue')); 
Vue.component('chat-log', require('./components/ChatLog.vue')); 
Vue.component('chat-composer', require('./components/ChatComposer.vue')); 

const app = new Vue({ 
    el: '#app', 
    data: { 
     messages: [ 
      { 
       message: 'Hey!', 
       user: "John Doe" 
      }, 
      { 
       message: 'Hello!', 
       user: "Jane Doe" 
      } 
     ] 
    }, 
    methods: { 
     addMessage(message) { 
      // Add to existing messages 
      this.messages.push(message); 
      // Persist to the database etc 
     } 
    } 
});

來源

2017-02-02 Hola

你能告訴您的實際情況的Vue也？ –

我加入這一次請 – Hola

我剛剛從上面建立一個新的項目，所有的代碼，並沒有得到任何的問題code..check。 –

由於chat-log和chat-composer組件在主HTML頁面引用，您發送給他們的數據必須是主要的Vue實例內。

，你作爲一個道具送，以及你想成爲一個傾聽者，將通知主實例發送消息時，必須是主VUE JS實例內（根）

new Vue({ 
//your code 
data:{ 
messages:[]//populate it with some data 
}, 
methods:{ 
    addMessage(message){ 
    //this will get called when chat composer calls sendMessage 
    } 
} 
})

的 addMessage方法 messages

來源

2017-02-02 17:04:05

[Vue的警告]：屬性或方法「郵件」的實例不定義，但引用期間呈現

回答

相關問題