如何在Vue 3项目中显示用date-fns格式化的Fi还原时间戳字段？

Question

我试图在DOM中使用date-fns date实用程序库的格式显示createdAt字段，该格式返回给定日期和now之间的距离，例如“不到一分钟”前。

例如，在给定的Firestore文档中，createdAt是timestamp类型，值为11/14/2021 10:49:09 AM

我能够访问和显示createdAt字段，如下所示：

我试图显示date-fns格式化日期如下：

在

在

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（）在DOM中的

为什么toDate（）方法（链接到Firebase文档中的方法）在computedDateToNow中引起问题？

UPDATE基于这个注释，这是很可能的，这个javascript函数被放置在实际的html被加载之前，我添加了一个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>

感谢任何帮助！




Answer 1

一个点位于计算属性上：仅当检查通过时才返回一个值，而计算属性应始终返回某个值。

因此，我宁愿尝试这种方法：

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';
})

Answer 2

我建议使用npm软件包管理器：

在这种情况下，您可以直接在组件中使用过滤器。

// my-component.js
import { dateFilter } from "vue-date-fns";
 
export default {
    filters: {
        date: dateFilter
    }
}

<!-- my-component.vue -->
<template>
    <div>Now: {{ new Date() | date }}</div>
</template>

如果您想继续使用当前代码，也许可以尝试调试const computedatenow，以查看您得到的值。

根据你分享的date-fns的留档，这里有一个console.log的例子：

console.log(format(new Date(), "'Today is a' eeee"))

输出应为：

//=> "Today is a Wednesday"

这将帮助您验证函数是否执行良好；如果没有，验证库的导入。

一个建议是将数据类型从const更改为var。请记住，var可以更新和重新声明，const不仅不能重新声明，而且不能重新分配。