組件中未定義Vue.js道具

父app的對象messages正在從服務器正確填充。但chat-room組件的道具messages並非來自父母的messages。我在想什麼？組件中未定義Vue.js道具

這裏是我的刀模板：

<chat-room></chat-room> 
<chat-composer v-on:messagesent="addMessage"></chat-composer>

這裏是我的chat-room組件：

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

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

這裏是我的app.js：

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

const app = new Vue({ 
    el: '#app', 
    data: { 
    messages: [] 
    }, 
    methods: { 
    addMessage(message) { 
     this.messages.push(message); 
     axios.post(base_url+'/room/1/write_message', message).then(response => { }); 
    } 
    }, 
    created() { 
    axios.get(base_url+'/room/1/messages').then(response => { 
     this.messages = response.data; 
     console.log(this.messages); //this returns an Array[4]! 
    }); 
    } 
});

來源

2017-02-19 Bassem El Hachem

你可以在你使用「聊天室」組件的地方顯示你的代碼嗎？ –

是的，我知道你已經顯示了你的ChatRoom.vue文件的內容。我的意思是你能告訴你如何在你的應用中使用這個組件，例如你在哪裏/如何使用'''？ –

我更新了問題。我正在使用一個簡單的html標籤 –

你不是理由看到您的chat-room組件內部的消息是因爲您沒有將它們傳遞給它。

變化：

<chat-room></chat-room>

爲：

<chat-room :messages="messages"></chat-room>

希望這有助於！

來源

2017-02-19 02:51:17

組件中未定義Vue.js道具

回答

相關問題