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

Need a 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

Need a 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
}

Need a 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()
  })
}



  
  

Need a 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.