对数组中的vue组件使用moment().fromNow()

Question

如何使用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)
        }
    }

Answer 1

变量datePosted似乎未定义。格式函数应该类似于{{ moment(post.datePosted).fromNow() }}。另外，不要使用大小写不同的变量：post和Post。

Answer 2

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

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

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

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

{{ post.datePost }}