Question

我使用moment.js来显示从某个事件传递的时间。

我有一个列表（使用vue.js呈现）

event 3, 5 seconds ago
event 2, 1 minute ago
event 1, 5 minutes ago

问题是：列表不经常更新（例如，每2分钟添加一个新项目）。

我想更新n (seconds|minutes) ago字符串。

我应该使用setInterval进行简单的循环吗？

for(let i = 0; i < this.list.length; i++) {
    let item = this.list[i];
    item.created_at_diff = moment(item.created_at).fromNow();
    this.$set(this.list, i, item);
}

还是有更好的方法？

Answer 1

以下是我会做这样的事情，告诉我，如果我错了：

首先，我将创建一个组成计时器的组件：

let Timer = Vue.extend({
  template: '#timer',
  props: ['timestamp'],
  data () {
    return {
        formatted: ''
    }
  },
  methods: {
    format () {
      let self = this
      this.formatted = moment().to(moment(this.timestamp,'X'))

      // Uncomment this line to see that reactivity works
      // this.formatted = moment().format('X')

      setTimeout(() => {
        self.format()
      },500)
    }
  },
  created () {
    this.format()
  }
})

计时器采用一个属性，一个UNIX时间戳，以秒为单位。该组件包含一个名为format()的方法，该方法将更新组件的唯一数据formatted。该方法是递归的，并且每500ms调用一次（使用setTimeout()），如果需要，可以将此数字设置得更大。

如果您想测试它，我会制作一个jsFiddle：

https://jsfiddle.net/54qhk08h/

在vue.js 2中重新登录列表

1 个答案: