Vue在修改数组之前重新渲染momentjs日期

Question

我有一个孩子从父母那里获得道具，点击按钮后，通过事件总线发送给父母。

发出启动方法，通过swagger-client获取数据。

目标是在点击子项后重新创建一系列活动。

活动项具有date属性，该属性从nowNow转换为momentjs方法。 methods:{ getActivity(){ let vm = this this.$swagger.Activity.Activity_activityAll( { filter: JSON.stringify({ order: 'Date DESC', include: [{ relation: 'person', scope: { order: 'DateCreated ASC' } } ] }) } ) .then(function (resp) { vm.$set(vm, 'activity', resp.body['activity']) }) } }

问题在于，当我获取新列表（并将其设置为vm.activities）时，最上面的项目的日期会在通过列表中的新项目替换之前刷新一秒。我用肉眼可以看到新的日期和可见度。

  mounted () {
    let vm = this
    this.$eventBus.$on('childAction', () => {

      vm.getActivity()

    })
  },

并且监听器已挂载

vm.$set(vm, 'activity', resp.body['activity'])

如果我运行调试器，它会清楚地显示fromNow后更新 SimpleDateFormat和列表仅在方法结束后更新：

你知道是什么原因引起的吗？

Answer 1

所以问题是在第一次ajax调用完成之前触发重新呈现所有被动数据的另一个（并行）调用。

解决方案是通过向活动添加fromNow日期并迭代计算属性来修改计算属性中this.activity的数据。

像这样：

computed: {
    compActivities () {
      this.activities.forEach((item, index, arr) => {
        arr[index].ActivityDateInterval = moment(item.ActivityDate).fromNow(true)
      }
      )
      return this.activities
    }
}