用数组中的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

在我看来，你可以绘制 res.data 并将格式化数据的属性附加到对象中，如

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

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

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

{{ post.datePost }}