将 moment().fromNow() 与数组中的 vue 组件一起使用答案

【问题标题】：Use moment().fromNow() with a vue component in array将 moment().fromNow() 与数组中的 vue 组件一起使用
【发布时间】：2020-08-04 18:15:37
【问题描述】：

如何使用 Momentjs 格式化我的 vue 组件中的日期？当我手动输入日期时，moment().fromNow() 函数可以正常工作，但我想使用从我的 API 获取的日期。

目前是这个样子，我把需要帮助的部分放在*中。

Vue.js

 <div class="post d-flex flex-row" v-for="(post, i) in Post" :key="i">
    <h6 class="card-subtitle mb-2 text-muted">Posted **{{moment(datePosted).fromNow()}}** by {{post.user}}</h6>
 </div>

data() {
        return{
            Post: []
        }
    },
    async created() {
        try{
            const res = await axios.get(url)
            this.Post = res.data;
        } catch(err){
            console.log(err)
        }
    }

【问题讨论】：

这能回答你的问题吗？ Vue momentjs update relative time in real time
不，我基本上是在尝试做类似 {{moment({{post.datePosted}}).fromNow()}} 的事情。但是我不能像那样将组件放入 moment 函数中
但这不会是被动的

标签： vue.js momentjs

【解决方案1】：

变量datePosted 似乎未定义。格式函数应该类似于{{ moment(post.datePosted).fromNow() }}。也不要使用因情况而异的变量：post 和 Post。

【讨论】：

哇，原来这么简单。我想我需要休息一下，我现在开始过度思考事情了。谢谢！

【解决方案2】：

在我看来，您可以将 res.data 映射到 created 并将带有格式化数据的属性附加到对象。例如：

this.Post = res.data.map(post => ({
   ...post,
   datePost: moment(post.date).fromNow()
})

显然，我不知道 post.date 是否是正确的属性。你必须在那里输入正确的。还要确保你导入了 moment js 模块。

然后在模板中，你可以使用：

{{ post.datePost }}

【讨论】：