[Vue warn]: Property or method "messages" is not defined on the instance but referenced during render

Question

I'm testing VueJs for testing purpose where user will send some message and message will be render to homepage through components.

Here I have used three components ..But when I send the message I see the following message..on console :

[Vue warn]: Property or method "messages" is not defined on the instance but referenced during render.

[Vue warn]: Property or method "addMessage" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Here is the blade page:

<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>

Here is the ChatMessage.vue components:

<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 (main vue js file)

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

I've just set up a new project with all the code from above and didn't get any issues. — Rwd

Cristi Jora Cristi Jora · Accepted Answer · 2017-02-02T17:04:05

Since the chat-log and chat-composer components are referenced in the main html page, the data you send to them has to be inside the main Vue instance.

messages that you send as a prop as well as the addMessage method that you want to be a listener that will notify the main instance when messages are sent have to be inside the main vue js instance (root)

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

[Vue warn]: Property or method "messages" is not defined on the instance but referenced during render

1 Answers