Vue re-renders momentjs dates before it modifies the array

Question

I have a child that gets props from parent and ,on button clicked, emits to parent via event bus.

On emit i launch method that fetches data via swagger-client.

The aim is to recreate array of activities after child click.

The activities items have date property that is converted to momentjs method fromNow. {{myFromNow(item.date)}}

The problem is that when i fetch fresh list (and set it to vm.activities), the topmost item's date gets refreshed for brief second before it is substituted via new item on the list. I flickers new date and its visible with naked eye.

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'])


        })
}
}

and the listener is on mounted

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

      vm.getActivity()

    })
  },

If i run debugger it clearly shows that fromNow is updated after vm.$set(vm, 'activity', resp.body['activity']) and list is updated only after end of method:

Do you have any idea what could cause it?

Can you prepare some simple jsfiddle, or please explain better relations between childs and main app in markup for example. I prepared some jsfiddle already but it's works well https://jsfiddle.net/50wL7mdz/336947/ and it is pretty straightforward — Max Sinev
@MaxSinev Thank you for reply. I found out that problem was in separate parallel call that i was making (and setting reactive variable). The breakpoint showed in question,changed (re-rendered) ,probably, next tick released by that separate call. It seems that i have to put my activity in computed property and iterate over that. — Mike

Mike Mike · Accepted Answer · 2018-05-26T15:16:11

So the problem was the other( parallel ) call that was triggering the re-rendering of all reactive data before first ajax call finished.

The solution is to modify data from this.activity in computed property by adding fromNow date to activities and iterate over that computed property.

Like this:

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

Vue re-renders momentjs dates before it modifies the array

1 Answers