How to determine when Vue has finished updating the DOM?

Question

I want to access the inner <input> element after it has been created by Vue:

<li v-repeat="subtask: subtasks"> <input v-model="subtask.name" type="text"> </li>

However, this code does not work:

/* add a new item (that in turn will create a new DOM node) */ subtasks.push({ name: 'wash the dishes', id: 'box-123' }); /* ... Around now, Vue should get busy creating the new <li> ... */ /* Now the element should exist, but it doesn't */ console.log(document.getElementById('box-123')); // --> null

However, the getElementById call comes back empty handed--the node does not exist at that time.

When can I be sure Vue has created / updated the DOM?

tony19 · Accepted Answer · 2022-07-15 19:55:57Z

Vue batches DOM updates and performs them asynchronously for performance reasons. After a data change, you can use Vue.nextTick to wait for the DOM updates to finish:

subtasks.push({}); Vue.nextTick(function () { // DOM updated });

If you are using it inside a component method where this is available (and a reference to the component), you can use:

this.$nextTick(function () { // DOM updated });

References:

Vue.nextTick

vm.$nextTick

For Vue 3 with composition API just: nextTick(() => { ... your code ... }). See: nextTick()

Mircea · Accepted Answer · 2015-04-06 12:32:15Z

If vue does not have a callback for this you can use a MutationObserver listener on the parent: https://developer.mozilla.org/en/docs/Web/API/MutationObserver

atazmin · Accepted Answer · 2021-02-25 05:51:01Z

0

This seem to work for me

mounted() { window.addEventListener('load', (event) => { ... }); },

answered Feb 25, 2021 at 5:51

atazmin

5,8651 gold badge41 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to determine when Vue has finished updating the DOM?

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related