Template refs for DOM access in Vue - Step-by-Step Execution

Concept Flow - Template refs for DOM access

Template renders

↓

Ref attribute set on element

↓

Vue creates ref object

↓

ref.value points to DOM element

↓

Access DOM via ref.value in script

↓

Manipulate or read DOM element

Vue renders the template, sets the ref attribute, creates a ref object, and links ref.value to the DOM element for script access.

Execution Sample

Vue

<template>
  <button ref="btnRef">Click me</button>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const btnRef = ref(null)
onMounted(() => {
  btnRef.value.focus()
})
</script>

This code sets a template ref on a button and focuses it when the component mounts.

Execution Table

Step	Action	Ref Value Before	Ref Value After	Effect
1	Component starts rendering	null	null	No DOM yet
2	Template creates <button> with ref="btnRef"	null	null	Button element created but ref not linked yet
3	Vue links btnRef.value to button DOM element	null	<button>	btnRef.value now points to button
4	onMounted hook runs	<button>	<button>	btnRef.value.focus() called
5	Button receives focus	<button>	<button>	Button is focused in browser

💡 Component fully mounted, ref linked, and DOM accessed

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
btnRef.value	null	<button>	<button>	<button>

Key Moments - 3 Insights

Why is btnRef.value null before the template renders?

Before rendering, the DOM element does not exist, so btnRef.value is null as shown in execution_table step 1 and 2.

How does Vue link the ref to the actual DOM element?

Vue sets btnRef.value to the DOM element after creating it in the template, as seen in execution_table step 3.

Why can we call btnRef.value.focus() safely inside onMounted?

Because onMounted runs after the DOM is rendered and btnRef.value is linked, so the button element exists (step 4).

Visual Quiz - 3 Questions

Look at the execution_table, what is btnRef.value at step 2?

A undefined

B <button>

C null

D a string 'btnRef'

💡 Hint

Check the 'Ref Value After' column at step 2 in execution_table

At which step does btnRef.value first point to the button DOM element?

A Step 1

B Step 3

C Step 4

D Step 5

💡 Hint

Look for when 'Ref Value After' changes from null to

If we tried to call btnRef.value.focus() before step 3, what would happen?

A An error or no effect because btnRef.value is null

B btnRef.value would be undefined

C The button would be focused successfully

D The button would be clicked automatically

💡 Hint

Refer to variable_tracker and execution_table steps 1 and 2 where btnRef.value is null

Concept Snapshot

Template refs let you access DOM elements in Vue templates.
Use ref="name" on an element.
In script, create a ref variable with ref(null).
After rendering, ref.value points to the DOM element.
Use onMounted to safely access DOM via ref.value.
Useful for focus, measurements, or direct DOM manipulation.

Full Transcript

In Vue, template refs let you get direct access to DOM elements. You add ref="btnRef" on a button in the template. In the script, you create btnRef with ref(null). When Vue renders the template, it creates the button element but btnRef.value is still null until Vue links it. After linking, btnRef.value points to the button DOM element. You can then call methods like btnRef.value.focus() safely inside the onMounted hook because the DOM is ready. This process helps you interact with the DOM directly in a controlled way.

Practice

1. What is the main purpose of using template refs in Vue?

easy

A. To directly access DOM elements or child components from the template

B. To define reactive state variables

C. To create computed properties

D. To register global components

Solution

1. Step 1: Understand what template refs do

   Template refs provide a way to directly access DOM elements or child components inside Vue templates.

2. Step 2: Compare with other Vue features

   Reactive state variables and computed properties are for data management, not direct DOM access. Global components registration is unrelated.

3. Final Answer:

   To directly access DOM elements or child components from the template -> Option A

4. Quick Check:

   Template refs = direct DOM/component access [OK]

Hint: Template refs connect template elements to script variables [OK]

Common Mistakes:

• Confusing refs with reactive state
• Thinking refs create computed properties
• Assuming refs register components

2. Which of the following is the correct way to declare a template ref in Vue 3's <script setup> syntax?

easy

A. const myRef = ref(null);

B. let myRef = reactive(null);

C. const myRef = computed(() => null);

D. var myRef = ref('element');

Solution

1. Step 1: Recall how to declare refs in Vue 3 script setup

   Use const myRef = ref(null); to create a ref variable initialized to null.

2. Step 2: Check other options for correctness

   reactive is for objects, not refs. computed is for derived values. Using var is discouraged and 'element' is not a valid initial value for a ref to DOM.

3. Final Answer:

   const myRef = ref(null); -> Option A

4. Quick Check:

   Declare ref with ref(null) [OK]

Hint: Use ref(null) to declare template refs in script setup [OK]

Common Mistakes:

• Using reactive instead of ref for DOM refs
• Initializing ref with wrong value
• Using var instead of const

3. Given the following Vue 3 component code, what will be logged when the button is clicked?

<template>
  <input ref="inputRef" />
  <button @click="focusInput">Focus</button>
</template>

<script setup>
import { ref } from 'vue';
const inputRef = ref(null);
function focusInput() {
  console.log(inputRef.value.tagName);
  inputRef.value.focus();
}
</script>

medium

A. undefined will be logged and an error occurs

B. "inputRef" will be logged and the input will get focus

C. "INPUT" will be logged and the input will get focus

D. Nothing will be logged and no focus happens

Solution

1. Step 1: Understand what inputRef.value refers to

   inputRef is a ref to the input DOM element, so inputRef.value is the actual input element.

2. Step 2: Check what tagName returns and focus behavior

   inputRef.value.tagName returns the uppercase tag name "INPUT". Calling focus() sets keyboard focus on the input.

3. Final Answer:

   "INPUT" will be logged and the input will get focus -> Option C

4. Quick Check:

   inputRef.value.tagName = "INPUT" and focus works [OK]

Hint: Ref value holds the DOM element; tagName is uppercase [OK]

Common Mistakes:

• Logging the ref variable name instead of its value
• Forgetting to use .value to access the element
• Assuming tagName is lowercase

4. Identify the error in this Vue 3 code snippet using template refs:

<template>
  <div ref="box">Content</div>
</template>

<script setup>
import { ref } from 'vue';
const box = ref();
console.log(box.value.textContent);
</script>

medium

A. The ref variable 'box' is not initialized with null

B. Accessing box.value.textContent before DOM is mounted causes error

C. The ref attribute should be used as :ref instead of ref

D. Missing import of onMounted to access DOM safely

Solution

1. Step 1: Check ref initialization and usage timing

   box is declared as ref() without initial value, which defaults to undefined. Accessing box.value.textContent immediately runs before DOM is ready.

2. Step 2: Understand Vue lifecycle for DOM refs

   Template refs are assigned after the component mounts. Accessing them too early (during setup) causes box.value to be null or undefined, so textContent access fails.

3. Final Answer:

   Accessing box.value.textContent before DOM is mounted causes error -> Option B

4. Quick Check:

   Access DOM refs only after mount [OK]

Hint: Access refs after mount, not immediately in setup [OK]

Common Mistakes:

• Trying to read ref value before DOM exists
• Not initializing ref with null (less critical)
• Confusing ref attribute syntax

5. You want to create a Vue 3 component that automatically focuses an input element when the component is mounted using template refs. Which code snippet correctly implements this behavior?

hard

A. <template>
<input :ref="inputRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
const inputRef = ref(null);
onMounted(() => {
inputRef.focus();
});
</script>

B. <template>
<input ref="inputRef" />
</template>

<script setup>
import { ref } from 'vue';
const inputRef = ref(null);
inputRef.value.focus();
</script>

C. <template>
<input ref="inputRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
const inputRef = ref(null);
onMounted(() => {
inputRef.value.focus();
});
inputRef.value.focus();
</script>

D. <template>
<input ref="inputRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
const inputRef = ref(null);
onMounted(() => {
inputRef.value.focus();
});
</script>

Solution

1. Step 1: Use onMounted to run code after DOM is ready

   To safely access the input element, focus must be called inside onMounted lifecycle hook.

2. Step 2: Access the DOM element via inputRef.value and call focus()

   inputRef is a ref initialized to null, and inputRef.value holds the DOM element after mount. Calling inputRef.value.focus() sets focus correctly.

3. Final Answer:

   Code snippet C correctly uses onMounted and inputRef.value.focus() -> Option D

4. Quick Check:

   Use onMounted + inputRef.value.focus() [OK]

Hint: Focus input inside onMounted using inputRef.value.focus() [OK]

Common Mistakes:

• Calling focus outside onMounted before DOM ready
• Using :ref instead of ref attribute
• Calling focus on ref instead of ref.value