如何在 Vue.js/Firebase 应用中显示时间戳

Question

我正在尝试基于以下存储库构建 Vue.js/Firebase 聊天应用程序： https : //github.com/jsfanatik/vuestacks-chat-vue-firebase 。 我已经设置了 Chat 组件以启用将输入的消息推送到 firestore，然后通过getMessage()方法将消息返回到模板。 getMessage()方法将所有消息内容返回到屏幕，包括登录用户的名称、消息内容和使用 moment.js 重新格式化的时间戳。 repo 的问题在于，一旦添加了新消息，所有其他消息上的时间戳将重新呈现以反映最新消息的时间戳。 我认为问题出在getMessage()方法上：

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

...但我不确定如何重新配置​​此方法以解决该问题。 知道如何让每条消息保持自己的时间戳，而不是当前消息的时间戳吗？ 谢谢！

Answer 1

我认为您需要将Firestore 时间戳转换为 Javascript 日期，然后再将其与 moment js 一起使用

appData.timestamp = moment(appData.timestamp.toDate()).format('lll')

Answer 2

Firebase 时间戳可以呈现为自纪元以来的毫秒数，可以在 moment 构造函数中使用

moment(doc.timestamp.toMillis()).format('lll')