怎么在Vue 3项目中显示格式为Date-FNS的FiRestore时间戳字段?
本教程将介绍如何在Vue 3项目中显示格式为Date-FNS的FiRestore时间戳字段?的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。
问题描述
在Cloud FiRestore文档的名为reviews
的集合中,我有一个createdAt
timestamp
类型的字段。
我正在尝试使用日期实用程序库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时间戳字段?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。