How to Trigger Update After HTML is Loaded

I have a computed property that uses the height of a div. This div is within a v-for loop.

I notice that when I load the html page, the computed property returns undefined because the concerned div has not been rendered. After the whole page is rendered, any event that triggers update will make the computed property return the correct value.

My question is: Is there a way to trigger update automatically after the div is rendered to get the computed property recalculated?

Sorry, I couldn’t produce a good example, and the whole original code is too cumbersome to place here.

You should be able to trigger an update from within the mounted() hook.

mounted () {
  this.$nextTick(() => {
    // update here
  })
}
  • I used $nextTick to make sure that the DOM has finished updating.
  • Since you didn’t share any code I don’t know how your computed prop works so I can’t be more specific.

Hi. Just an update on this, in case anyone stumbles upon this.

Unfortunately, $nextTick doesn’t work. The reason for this is probably similar to this post.

From my investigation for another issue, I came across this, and implemented a similar series of promises. In particular, I adopted waitRender, promiseRender, promiseSleep and promiseEachArray.

I haven’t found a better way to do this. In case anyone does, please let me know.