I have a component, which has an inner compnent, that holds an array in the data section. when some value is pushed to the array, another div is created and the component re-renders.
<div class="engine" v-for="(dialect, index) in entitiesArray" :key="index" style="height: 36px;">
I want to fire an event when the ui finished. completely to re-render.
I tried the 'updated' method
from the documentation: https://v2.vuejs.org/v2/api/#updated:~:text=also%3A%20Lifecycle%20Diagram-,updated,-Type%3A%20Function
The component’s DOM will have been updated when this hook is called, so you can perform DOM-dependent operations here. However, in most cases you should avoid changing state inside the hook. To react to state changes, it’s usually better to use a computed property or watcher instead.
Note that updated does not guarantee that all child components have also been re-rendered.
That does not work properly, and as stated in the documentation, even after adding 'await Vue.nextTick()', the element does not completely renders.
Additionally, I used a watcher for the array, which did not solve my issue.
the solutions I found are:
- 'await flushPromises()'
- setTimeout() with 0 ms, so the code will be pushed to the end of the queue.
What would be considered as best practice to solve this issue? In general, what is the best approach to wait ( or listen to some event) so that all UI changes and components re-rendering had been done entirely.
Thanks!