[Solved] How to show refreshed value from an array

Question

You’re running into one of the change detection caveats, outlined here:

https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Specifically on this line:

this.showLeft[this.tasks[i].id] =
    days + " D " + hours + " H " + minutes + " M " + seconds + " S ";

The object this.showLeft is empty when it is created within data, so it won’t have any reactive properties. It works fine if you change it to this:

this.$set(
    this.showLeft,
    this.tasks[i].id,
    days + " D " + hours + " H " + minutes + " M " + seconds + " S "
)

This tells Vue to add a reactive property to showLeft, such that the UI will update when it changes.

An alternative would be to create a new object each time:

// Somewhere near the top of updateCurrentTime
const showLeft = {};

// ... set values on showLeft instead of this.showLeft

this.showLeft = showLeft

Personally I think I would make greater use of computed properties for this, rather than trying to do everything inside updateCurrentTime. I can’t be more specific given the code is incomplete.

Accepted Answer