I am dealing with a situation where my child component receives data from its parent and, upon button click, sends an event to the parent via an event bus.
Upon receiving the event, I trigger a method that fetches data using a Swagger client.
The goal is to update an array of activities after each click on the child component.
Within the activities array, there are items with a date property which is converted to a formatted string using Moment.js: {{myFromNow(item.date)}}
The issue arises when I fetch a fresh list of activities (and set it to vm.activities), where the topmost item's date briefly refreshes before being replaced by the new item. This flickering of the new date is noticeable visually.
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'])
})
}
}
The listener for the event is set up in the mounted hook:
mounted () {
let vm = this
this.$eventBus.$on('childAction', () => {
vm.getActivity()
})
},
When debugging, it is evident that the fromNow function is updated after the
vm.$set(vm, 'activity', resp.body['activity'])Do you have any insights into what might be causing this behavior?