在不刷新页面的情况下，从vuejs中的momentjs获取更新的时间信息？

Question

我有一张表，其中显示有关站点的信息。 这些信息之一是上次刷新数据的时间。
在表格的顶部，我想添加一个图标，该图标仅在现在和上次刷新数据之间的时间 > 5 分钟时出现。 我希望这些数据在用户不刷新页面的情况下更新。

我在我的 vuejs 代码中添加了一个这个组件

computed () {
getMinutesPassedSinceLastRefresh () {
     if (moment(this.currentTime).diff(this.lastRefreshTime, 'minutes') >= 5) {
        return moment(this.currentTime).diff(this.lastRefreshTime, 'minutes')
      }
  }
}

这将返回上次刷新数据与当前时间之间的分钟数。 但是其中的数据不会自行更新，只有在我刷新页面时才会更新，或者当我 go 到另一个选项卡并返回时。

任何想法如何解决这个问题？

Answer 1

currentTime和/或lastRefreshTime似乎不是反应性的 - 它们是否在数据中正确定义并设置了默认值？ 它应该是这样的

data () {
  return {
    currentTime: null,
    lastRefreshTime: null
  }
}

这些值不一定是 null，但定义它们很重要。

此外，计算属性最好返回一些东西，而不是依赖于默认的未定义。 老实说，我不确定这是否会导致这个问题，但请尝试这样做

const minutesSinceLastUpdate = moment... // calculate minutes
return minutesSinceLastUpdate > 5
  ? minutesSinceLastUpdate
  : null

有关反应性的文档

Answer 2

如果我理解正确，你需要使用setInterval来更新currentTime值。 与此相结合，您可以使用computed属性来显示模板中的差异。

它可以是这样的：

 new Vue({ el: "#app", data: { currentTime: moment(), lastUpdatedAt: moment(), intervalRef: null, }, computed: { difference() { return moment.duration(this.lastUpdatedAt.diff(this.currentTime)).humanize(true) } }, mounted() { this.intervalRef = setInterval(() => { this.currentTime = moment() }, 5000) }, unmounted() { this.intervalRef = null } })

 <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <h2>Time since last refresh: {{difference}}</h2> </div>

在这里，代码每 5 秒更新一次时间。

矩差文档： https://momentjs.com/docs/#/durations/diffing/

JSFiddle 示例