Where could The blow error be occurring? there is been staring at this for awhile and cannot figure it out. there is tried to console log, all of the data that is being imputed into the database and they all have values…
when trying to push the current message to the database in order to create a real time chat app. Provided below is the code.
This project is using firebase and VueJs.
CreateMessage.vue.js (where I believe the error is)
<template>
<div class=”container” style=”margin-bottom: 30px”>
<form>
<div class=”form-group”>
<input type=”text” class=”form-control” placeholder=”Enter message …” v-model=”newMessage”>
<p class=”text-danger” v-if=”errorText”>{ errorText }</p>
</div>
<button class=”btn btn-primary” type=”submit” @click.stop.prevent=”createMessage”> Submit</button>
</form>
</div>
</template>
<script>
import firebase from ‘../components/firebaseconfig’;
import AuthMonitor from ‘../AuthMonitor’;
import Login from ‘../components/Login’;
export default {
name: ‘CreateMessage’,
mixins:[AuthMonitor],
data(){
return {
newMessage: “”,
errorText: “”,
user: firebase.auth().currentUser
}
},
methods: {
createMessage () {
console.log(this.newMessage);
if (this.newMessage != ‘’) {
console.log(Date.now());
firebase.database().ref(“messages”).push().set({
message: this.newMessage,
name: this.user,
timestamp: Date.now()
}).catch(err => {
console.log(err);
});
this.newMessage = “”;
this.errorText = “”;
} else {
this.errorText = “A message must be entered!”
}
}
}
}
</script>
ChatRoom.vue.js . (the view)
<template>
<div class=”chat container” v-if=”isAuth”>
<h2 class=”text-primary text-center”>Real-Time Chat</h2>
<h5 class=”text-secondary text-center”>Powered by Vue.js & Firebase</h5>
<div class=”card”>
<div class=”card-body”>
<p class=”nomessages text-secondary” v-if=”messages.length == 0”>
[No messages yet!]
</p>
<div class=”messages” v-chat-scroll=”{always: false, smooth: true}”>
<div v-for=”message in messages” :key=”message.id”>
<span class=”text-info”>[{ message.name }]: </span>
<span>{message.message}</span>
<span class=”text-secondary time”>{message.timestamp}</span>
</div>
</div>
</div>
<div class=”card-action”>
<CreateMessage/>
</div>
</div>
</div>
</template>
<script>
import CreateMessage from ‘@/components/CreateMessage’;
import firebase from ‘../components/firebaseconfig’;
import AuthMonitor from ‘../AuthMonitor’;
import moment from ‘moment’;
export default {
name: ‘Chat’,
mixins:[AuthMonitor],
components: {
CreateMessage
},
data() {
return{
messages: []
}
},
// created() {
// let ref = firebase.database().ref(‘messages’);
// ref.onSnapshot(snapshot => {
// snapshot.docChanges().forEach(change => {
// if (change.type == ‘added’) {
// let doc = change.doc;
// this.messages.push({
// id: doc.id,
// name: doc.data().name,
// message: doc.data().message,
// timestamp: moment(doc.data().timestamp).format(‘LTS’)
// });
// }
// });
// });
// }
}
</script>
<style>
.chat h2{
font-size: 2.6em;
margin-bottom: 0px;
}
.chat h5{
margin-top: 0px;
margin-bottom: 40px;
}
.chat span{
font-size: 1.2em;
}
.chat .time{
display: block;
font-size: 0.7em;
}
.messages{
max-height: 300px;
overflow: auto;
}
</style>
Solution :
The error message is telling you that this.user contains a property ja which contains an undefined value. You can’t put undefined values into Realtime Database.