Vue Moment.js实时更新相对时间 [英] Vue momentjs update relative time in real time

问题描述

如何为用户实时从 momentjs 更新相对时间?

How I can do update relative time from momentjs in real time for user?

我已经计算出:

computed: {
  ago() {
     return moment().fromNow();
    },
}

当我在组件中使用时:

<span class="text-muted pr-2" v-text="ago"></span>

我得到静态文本:几秒钟前，如何在不重新加载页面的情况下更新此文本?我想看:一分钟前，一个两分钟前 e.t.c ..

I get static text: a few seconds ago, how update this text without page reloading? I want see: a minute ago, a two minutes ago e.t.c..

如何为用户实时执行此操作?

How I can do this in real time for user?

推荐答案

由于 moment().fromNow()不起作用，因此您不会看到任何更改，因此我们修复了应该在 created 钩子 this.oldTime = new Date(); 中初始化的旧时间属性，并使用 1s ，根据旧时属性，我们将其称为 moment(this.old).fromNow(); 以更新我们的属性 .

Since moment().fromNow() isn't reactive so you will not see any change,to deal with we fix an old time property which should be initialized in the created hook this.oldTime = new Date();, and set a time interval with 1s, based on the old time property we call moment(this.old).fromNow(); to update our property ago.

// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {
      ago: '',
      oldTime: '',
    interval:null
    }
  },
 destroyed(){
   clearInterval(this.interval)
   },
  created() {
    this.oldTime = new Date();
    this.interval=setInterval(() => {
      this.ago = moment(this.oldTime).fromNow();
    }, 1000)
  }
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>

<div id="app" class="container">

  <span class="text-muted pr-2" >
  {{ago}}
  </span>
</div>

基于@Badgy的评论:

Based on the comment of @Badgy :

如何处理v-for，通过函数在UI中显示它?我考虑过将其附加到创建的消息对象上，并每隔x秒更新所有消息对象，但不确定其最佳方法

为适应这种情况，我们应该创建一个时间间隔，在此间隔中我们更新每条消息的 ago 属性:

to fit to this situation we should create a time interval in which we update the ago property of each message :

// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {

      messages: [{
          content: 'Hello !',
          time: '2019-09-10 00:08'
        },
        {
          content: 'Hello again!',
          time: '2019-09-10 00:10'
        }
      ],
  interval:null
    }
  },
  computed: {
    msgs() {
      return messages

    }
  },
       destroyed(){
   clearInterval(this.interval)
   },
  created() {

    this.interval=setInterval(() => {

      this.messages = this.messages.map(m => {
        m.ago = moment(m.time).fromNow();
        return m;
      })
    }, 1000)
  }
});

.primary{
color:blue
}

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>

<div id="app" class="container">

  <ul>
    <li v-for="m in messages">{{m.content}} <span class="primary">{{m.ago}}</span></li>
  </ul>
</div>

这篇关于Vue Moment.js实时更新相对时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！