nextTick for DOM update timing in Vue - Mini Project: Build & Apply

Using nextTick for DOM Update Timing in Vue

📖 Scenario: You are building a simple Vue 3 component that shows a message and a button. When the button is clicked, the message changes and you want to focus an input field that appears after the message changes.

🎯 Goal: Build a Vue 3 component that updates a message and then uses nextTick to wait for the DOM to update before focusing an input field.

📋 What You'll Learn

Create a reactive message variable with initial text

Add a boolean reactive variable to control input visibility

Use nextTick to wait for DOM update after changing message and showing input

Focus the input field after the DOM updates

💡 Why This Matters

🌍 Real World

In real apps, you often need to wait for the UI to update before doing things like focusing inputs or measuring elements. nextTick helps with this timing.

💼 Career

Understanding nextTick is important for Vue developers to handle DOM updates correctly and create smooth user experiences.

1

DATA SETUP: Create reactive variables for message and input visibility

In the <script setup> block, import ref from 'vue'. Create a reactive variable called message with the initial value 'Hello, Vue!'. Also create a reactive boolean variable called showInput and set it to false.

Vue

// Create reactive variables message and showInput
// Your code here

Hint

Use ref to create reactive variables. For example, const message = ref('Hello, Vue!').

2

CONFIGURATION: Add a method to update message and show input

Add a function called updateMessage inside the <script setup> block. This function should set message.value to 'Message updated!' and set showInput.value to true.

Vue

import { ref } from 'vue'

const message = ref('Hello, Vue!')
const showInput = ref(false)

// Add updateMessage function
// Your code here

Hint

Define a function named updateMessage that changes the reactive variables.

3

CORE LOGIC: Use nextTick to focus input after DOM update

Import nextTick from 'vue'. Inside the updateMessage function, after setting message.value and showInput.value, call nextTick and inside its callback, focus the input element using a template ref called inputRef.

Vue

import { ref } from 'vue'

const message = ref('Hello, Vue!')
const showInput = ref(false)

function updateMessage() {
  message.value = 'Message updated!'
  showInput.value = true
  // Use nextTick to focus input
  // Your code here
}

Hint

Use nextTick to wait for the DOM to update before focusing the input. Use optional chaining ?. to safely call focus().

4

COMPLETION: Add template with message, button, and conditional input with ref

Add a <template> block. Inside it, display the message in a <p>. Add a <button> that calls updateMessage on click. Below the button, add an <input> element that only shows when showInput is true. Add ref="inputRef" to the input element.

Vue

import { ref, nextTick } from 'vue'

const message = ref('Hello, Vue!')
const showInput = ref(false)
const inputRef = ref(null)

function updateMessage() {
  message.value = 'Message updated!'
  showInput.value = true
  nextTick(() => {
    inputRef.value?.focus()
  })
}



  
  

Hint

Use v-if to show the input only when showInput is true. Use @click on the button to call updateMessage. Add ref="inputRef" to the input.

Practice

1. What is the main purpose of nextTick in Vue?

easy

A. To delay data changes by a fixed time

B. To run code after Vue updates the DOM

C. To immediately update the data without waiting

D. To cancel pending DOM updates

Solution

1. Step 1: Understand Vue's update process

   Vue batches DOM updates and applies them asynchronously after data changes.

2. Step 2: Role of nextTick

   nextTick schedules code to run after these DOM updates finish, ensuring the page is updated.

3. Final Answer:

   To run code after Vue updates the DOM -> Option B

4. Quick Check:

   nextTick waits for DOM update = A [OK]

Hint: nextTick runs code after DOM updates finish [OK]

Common Mistakes:

• Thinking nextTick delays data changes
• Believing nextTick updates data immediately
• Assuming nextTick cancels updates

2. Which of the following is the correct way to use nextTick in Vue 3 Composition API?

easy

A. import { nextTick } from 'vue'; nextTick(() => { /* code */ });

B. this.nextTick(() => { /* code */ });

C. Vue.nextTick(() => { /* code */ });

D. nextTick.then(() => { /* code */ });

Solution

1. Step 1: Importing nextTick in Vue 3

   In Vue 3 Composition API, nextTick is imported directly from 'vue'.

2. Step 2: Using nextTick as a function

   It is called as nextTick(() => { ... }) to run code after DOM updates.

3. Final Answer:

   import { nextTick } from 'vue'; nextTick(() => { /* code */ }); -> Option A

4. Quick Check:

   Import and call nextTick correctly = A [OK]

Hint: Import nextTick from 'vue' and call as function [OK]

Common Mistakes:

• Using this.nextTick in Composition API
• Calling nextTick as a property of Vue
• Trying to use nextTick as a promise without calling

3. Given this Vue 3 code snippet, what will be logged to the console?

import { ref, nextTick } from 'vue';
const count = ref(0);
count.value = 1;
console.log(count.value);
nextTick(() => {
  console.log(document.getElementById('count').textContent);
});

Assuming the template is <div id="count">{{ count }}</div>.

medium

A. Logs: 0 then '0'

B. Logs: 0 then '1'

C. Logs: 1 then '0'

D. Logs: 1 then '1'

Solution

1. Step 1: Understand reactive update timing

   Setting count.value = 1 updates the reactive data immediately, so console.log(count.value) logs 1.

2. Step 2: DOM update happens asynchronously

   The DOM text content updates after Vue processes changes. Using nextTick waits for this update, so inside nextTick callback, the DOM shows '1'.

3. Final Answer:

   Logs: 1 then '1' -> Option D

4. Quick Check:

   Data updates immediate, DOM updates after nextTick = D [OK]

Hint: Data logs immediately; DOM logs inside nextTick [OK]

Common Mistakes:

• Expecting DOM to update before nextTick
• Confusing reactive data and DOM content timing
• Logging DOM content without nextTick

4. What is wrong with this Vue 3 code snippet?

import { ref, nextTick } from 'vue';
const visible = ref(false);
visible.value = true;
console.log(document.getElementById('box').style.display);
nextTick(() => {
  console.log(document.getElementById('box').style.display);
});

Template: <div id="box" v-if="visible" style="display:block">Box</div>

medium

A. The first console.log runs before DOM updates, so it logs empty string

B. nextTick is used incorrectly and will cause an error

C. The ref should be reactive, not ref

D. The style attribute is ignored by Vue

Solution

1. Step 1: Timing of DOM updates with v-if

   Setting visible.value = true triggers DOM update, but it happens asynchronously after current code.

2. Step 2: First console.log runs before DOM update

   So document.getElementById('box') is null or style.display is empty at first log.

3. Step 3: nextTick callback runs after DOM update

   Inside nextTick, the element exists and style.display is 'block'.

4. Final Answer:

   The first console.log runs before DOM updates, so it logs empty string -> Option A

5. Quick Check:

   DOM updates delayed, nextTick waits = C [OK]

Hint: DOM not ready before nextTick; first log empty [OK]

Common Mistakes:

• Expecting DOM to update immediately after reactive change
• Misusing nextTick causing runtime errors
• Confusing ref with reactive for simple boolean

5. You want to focus an input element right after it appears because a reactive variable showInput changes from false to true. Which is the best way to ensure the input is focused correctly?

hard

A. Call inputElement.focus() immediately after setting showInput = true

B. Use a setTimeout with 0 delay to focus the input

C. Use nextTick(() => inputElement.focus()) after setting showInput = true

D. Focus the input in the template using autofocus attribute

Solution

1. Step 1: Understand DOM update timing with reactive changes

   When showInput changes, Vue updates the DOM asynchronously, so the input may not exist immediately.

2. Step 2: Use nextTick to wait for DOM update

   Calling nextTick(() => inputElement.focus()) ensures the input is in the DOM before focusing.

3. Step 3: Other options are less reliable

   Calling focus immediately may fail; setTimeout is less precise; autofocus attribute may not work if input is conditionally rendered.

4. Final Answer:

   Use nextTick(() => inputElement.focus()) after setting showInput = true -> Option C

5. Quick Check:

   Wait DOM update with nextTick before focus = B [OK]

Hint: Focus input inside nextTick after showing it [OK]

Common Mistakes:

• Focusing input before it exists in DOM
• Relying on autofocus attribute for conditional elements
• Using setTimeout instead of nextTick