Реквизиты Vue.js, не определенные в Компоненте

Question

У родителя app есть объект messages, который правильно заполняется с сервера. Но реквизит компонента chat-roommessages не подается от родительского messages. Что мне не хватает?

Вот мой шаблон лезвия:

<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]! 
    }); 
    } 
}); 

Answer 1

Причины вы не видя сообщения внутри вашего компонента chat-room, это потому, что вы не передаете их ему.

Изменения:

<chat-room></chat-room> 

Чтобы быть:

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

Надеется, что это помогает!