Skip to main content

$nextTick

The $nextTick special helper ensures that a callback function is executed after the framework has finished updating dependencies. This is useful for scenarios where you need to wait for DOM updates before executing logic.

Syntax​

$nextTick(() => {
  console.log('DOM updates completed');
});

Behavior​

  • $nextTick ensures that the callback executes after DOM updates are finished.
  • It returns a promise, allowing for asynchronous execution.
  • Useful for reading updated DOM values or performing next-step computations.

Example​

<div
  d-scope="{
    updateMessage: () => {
        message = 'Hello World!';
        $nextTick(() => alert($refs.p.textContent)); 
    }
}"
>
  <p d-ref="p">{{ message }}</p>
  <button @click="updateMessage">Update Message</button>
</div>
const { signal } = DOMY;
DOMY.createApp(() => {
  const message = signal('');
  return { message };
}).mount();