I'm struggling to pinpoint where exactly the error occurs. Despite numerous attempts to log all the input data for the database, everything seems to have values...
https://i.sstatic.net/TBk1L.png
The goal is to store the current message in the database for a real-time chat application. Below is the code snippet.
This project uses Firebase and VueJs.
CreateMessage.vue (potential error location)
<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 . (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>