Reputation: 2233
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
}
}
});
Upvotes: 1
Views: 3540
Reputation: 1752
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
}
}
})
Upvotes: 1