The parent app has an object messages, that is being filled correctly from the server. But the chat-room ponent's props messages is not feeding from the parent's messages. What am I missing??

Here is my blade template:

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

Here is my chat-room ponent:

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

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

Here is my app.js:

Vueponent('chat-message', require('./ponents/ChatMessage.vue'));
Vueponent('chat-room', require('./ponents/ChatRoom.vue'));
Vueponent('chat-poser', require('./ponents/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]!
    });
  }
});

The parent app has an object messages, that is being filled correctly from the server. But the chat-room ponent's props messages is not feeding from the parent's messages. What am I missing??

Here is my blade template:

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

Here is my chat-room ponent:

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

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

Here is my app.js:

Vue.ponent('chat-message', require('./ponents/ChatMessage.vue'));
Vue.ponent('chat-room', require('./ponents/ChatRoom.vue'));
Vue.ponent('chat-poser', require('./ponents/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]!
    });
  }
});

• javascript
• laravel
• vuejs2
• vue-ponent

Share Improve this question Follow edited Feb 19, 2017 at 2:48 BassMHL asked Feb 19, 2017 at 2:35 BassMHLBassMHL 9,0771010 gold badges5353 silver badges6767 bronze badges 3

• Can you show your code where you use your chat-room ponent? – Rwd Commented Feb 19, 2017 at 2:38
• Yeah, I got that you'd shown the contents of your ChatRoom.vue file. What I meant was can you show how you're using that ponent in you app i.e. where/how you're using <chat-room></chat-room>? – Rwd Commented Feb 19, 2017 at 2:46
• I updated the question. I'm using a simple html tag – BassMHL Commented Feb 19, 2017 at 2:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

The reason you're not seeing the messages inside your chat-room ponent is because you're not passing them to it.

Change:

<chat-room></chat-room>

To be:

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

Hope this helps!