Vue momentjs обновляет относительное время в реальном времени - PullRequest
Новая
       37

Vue momentjs обновляет относительное время в реальном времени

0 голосов
/ 20 января 2019

Как я могу обновить относительное время с momentjs в реальном времени для пользователя?

Я вычислил: 

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

И когда я использую в компоненте это: 

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

Я получаю статический текст: a few seconds ago, как обновить этот текст без перезагрузки страницы? Я хочу видеть: a minute ago, two minutes ago e.t.c ..

Как я могу сделать это в режиме реального времени для пользователя?

1 Ответ

0 голосов
/ 21 января 2019

Поскольку moment().fromNow() не реагирует, поэтому вы не увидите никаких изменений, для решения которых мы исправим старое свойство времени, которое должно быть инициализировано в created hook this.oldTime = new Date();, и установитевременной интервал с 1с , основанный на старом свойстве времени, которое мы называем moment(this.old).fromNow();, чтобы обновить наше свойство 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: ''
    }
  },

  created() {
    this.oldTime = new Date();
    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>
...