In my current project, I am working on developing a chat application using Vue.js and Firebase. The codebase I am referring to can be found at https://github.com/jsfanatik/vuestacks-chat-vue-firebase. I have successfully implemented the Chat component to allow users to input messages which are then stored in Firestore. These messages are retrieved using a method called getMessage() and displayed in the template. The getMessage() method is responsible for fetching the messages along with the sender's name, message content, and timestamp formatted using moment.js.
async getMessage () {
let snapshot = await db.collection('messages').orderBy('timestamp').get()
const messages = []
snapshot.forEach(doc => {
let appData = doc.data()
appData.id = doc.id
appData.timestamp = moment(doc.timestamp).format('lll')
messages.push(appData)
})
this.messages = messages
},
However, I am encountering an issue with the timestamps. Whenever a new message is added, all existing messages seem to update their timestamps to that of the most recent message. I suspect that the problem lies within the getMessage() method as shown above, but I am unsure how to modify it to ensure each message retains its original timestamp. Any suggestions on how I can resolve this issue and maintain individual timestamps for each message are greatly appreciated. Thank you!