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

【问题标题】：How to display timestamps in a Vue.js/Firebase app如何在 Vue.js/Firebase 应用中显示时间戳
【发布时间】：2020-02-12 01:01:47
【问题描述】：

我正在尝试基于以下存储库构建 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
    },

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

【问题讨论】：

标签： javascript firebase vue.js google-cloud-firestore momentjs

【解决方案1】：

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

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

【讨论】：

谢谢！虽然这不起作用:(然后我尝试添加该行的不同配置，如下所示：appData.timestamp = moment(doc.timestamp).toDate().format('lll')，但这也不起作用。我收到错误消息说：Cannot read property 'toDate' of undefined。还有其他想法吗？
@JS_is_awesome18 你需要做appData.timestamp = moment(appData.timestamp.toDate()).format('lll') 而不是moment(doc.timestamp).format('lll')，因为appData = doc.data()。 doc 是一个快照。 （答案改编）

【解决方案2】：

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

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

【讨论】：