如何在Vue 3项目中显示格式为Date-FNS的FiRestore时间戳字段？ [英] How to display a Firestore timestamp field, formatted with date-fns, in a Vue 3 project?

问题描述

在Cloud FiRestore文档的名为reviews的集合中，我有一个createdAttimestamp类型的字段。

我正在尝试使用日期实用程序库formatDistanceToNow在DOM中显示createdAt字段，它以单词形式返回给定日期和现在之间的距离，例如小于一分钟前。

例如，在给定的FiRestore文档中，createdAt属于timestamp类型，值为11/14/2021 10：49：09 AM

我可以访问并显示createdAt字段，如下所示：

<p>{{ review.createdAt }}</p>导致DOM：时间戳(秒=1636904949，纳秒=271000000)

<p>{{ review.createdAt.toDate() }}</p>导致DOM：Sun Nov 14 2021 10：49：09 GMT-0500(东部标准时间)

我正在尝试显示日期-FNS格式的日期，如下所示：

在<template>部分：<p>{{ computedDateToNow }}</p>

和<script>部分：

const computedDateToNow = computed(() => {
  return formatDistanceToNow(review.createdAt.toDate())
})

console.log(computedDateToNow)

我在控制台中看到的错误是

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toDate')
    at ReactiveEffect.eval [as fn] (ReviewDetails.vue?5986:590)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
    at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:1087)
    at unref (reactivity.esm-bundler.js?a1e9:1001)
    at Object.get (reactivity.esm-bundler.js?a1e9:1004)
    at Proxy.render (ReviewDetails.vue?5986:34)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:756)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4594)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:6987)

review.createdAt和review.createdAt.toDate()在<p>标记之间的DOM中显示得很好。

为什么toDate()方法(link to that in Firebase docs)在computedDateToNow中导致问题？

基于this comment更新很可能是在加载实际html之前放置了此javascript函数&我添加了if (review.createdAt)语句，错误消失了，但review.createdAt仍未在console.log(computedDateToNow)

中定义

下面是代码块，带有if语句：

const computedDateToNow = computed(() => {
    if (review.createdAt) {
      console.log('begin new console dot log',review.createdAt,'end new console dot log')
      return formatDistanceToNow(review.createdAt.toDate())
    }
      
    })

新增(应@Raffobaffo请求)：

<script>

import useDocument from '@/composables/useDocument'
import getDocument from '@/composables/getDocument'
import { computed } from 'vue'
import { formatDistanceToNow } from 'date-fns'

export default {
  props: ['id'],
  components: { },
  setup(props) {
    const { error, document: review } = getDocument('reviews', props.id)

    const { deleteDoc, updateDoc } = useDocument('reviews', props.id)


// BEGIN formatting timestamp

console.log('begin new console dot log',review.createdAt,'end new console dot log')

    const computedDateToNow = computed(() => {
    if (review.createdAt) {
      console.log('begin new console dot log',review.createdAt,'end new console dot log')
      return formatDistanceToNow(review.createdAt.toDate())
    }
      
    })

    console.log(computedDateToNow)
    
// END formatting timestamp



    return { error, review, formatDistanceToNow, computedDateToNow }  
  }
}
</script>

谢谢您的帮助！

推荐答案

一个点在计算器上： 您只在检查通过时返回值，而计算属性应始终return something。

所以我宁愿尝试这种方法：

const computedDateToNow = computed(() => {
if (review.createdAt) {
  console.log('begin new console dot log',review.createdAt,'end new console dot log')
  return formatDistanceToNow(review.createdAt.toDate())
}
  return 'not-available';
})

这篇关于如何在Vue 3项目中显示格式为Date-FNS的FiRestore时间戳字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！