Template refs for DOM access in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when accessing a template ref in Vue 3 Composition API?

Consider this Vue 3 component using ref to access a DOM element. What will be logged when the button is clicked?

Vue

<template>
  <input ref="inputRef" />
  <button @click="logInputValue">Log Value</button>
</template>

<script setup>
import { ref } from 'vue'
const inputRef = ref(null)

function logInputValue() {
  console.log(inputRef.value.value)
}
</script>

A Logs the current text inside the input box.

B Logs undefined because inputRef.value is null.

C Throws a runtime error because inputRef is not defined.

D Logs the DOM element itself, not its value.

💡 Hint

Remember that inputRef.value points to the DOM element, and .value on that element is the input's text.

In Vue 3, ref creates a reactive reference. When used with ref="inputRef" on an input element, inputRef.value points to the actual DOM input element. Accessing inputRef.value.value gets the current text inside the input box.

📝 Syntax

intermediate

Which option correctly defines and uses a template ref in Vue 3 <script setup>?

Select the code snippet that correctly declares a template ref and accesses the DOM element's text content.

A

<template>
  <textarea ref="textAreaRef"></textarea>
</template>
<script setup>
import { ref } from 'vue'
const textAreaRef = ref()
function showText() {
  alert(textAreaRef.value.value)
}
</script>

B

<template>
  <textarea ref="textAreaRef"></textarea>
</template>
<script setup>
const textAreaRef = null
function showText() {
  alert(textAreaRef.value.value)
}
</script>

C

<template>
  <textarea ref="textAreaRef"></textarea>
</template>
<script setup>
import { ref } from 'vue'
const textAreaRef = ref(null)
function showText() {
  alert(textAreaRef.value.value)
}
</script>

D

<template>
  <textarea ref="textAreaRef"></textarea>
</template>
<script setup>
import { reactive } from 'vue'
const textAreaRef = reactive(null)
function showText() {
  alert(textAreaRef.value.value)
}
</script>

💡 Hint

Template refs need to be initialized with ref(null) to work properly.

Option C correctly imports ref from Vue and initializes textAreaRef with ref(null). This allows Vue to assign the DOM element to textAreaRef.value. Other options either don't initialize properly or use wrong APIs.

🔧 Debug

advanced

Why does this Vue 3 code throw an error when accessing a template ref?

Given this code, what is the cause of the error when clicking the button?

Vue

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

<script setup>
import { ref } from 'vue'
const myInput = ref(null)

function focusInput() {
  myInput.focus()
}
</script>

A The input element does not support the <code>focus</code> method.

B The error happens because <code>ref</code> was not imported from Vue.

C The button click event is not properly bound, so the function is never called.

D The code throws an error because <code>myInput</code> is a ref object and needs <code>.value</code> to access the DOM element.

💡 Hint

Remember that refs are objects with a value property holding the actual DOM element.

myInput is a ref object. To access the DOM element, you must use myInput.value. Calling myInput.focus() tries to call focus on the ref object itself, which causes an error.

❓ state_output

advanced

What is the value of inputRef.value.value after mounting this Vue 3 component?

Analyze the component below. What will console.log(inputRef.value.value) output right after the component is mounted?

Vue

<template>
  <input ref="inputRef" value="Hello Vue" />
</template>

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

A null

B "Hello Vue"

C undefined

D Throws a runtime error because inputRef is null

💡 Hint

The value attribute sets the initial text inside the input element.

When the component mounts, inputRef.value points to the input DOM element. The value property of that element contains the initial text "Hello Vue".

🧠 Conceptual

expert

Why should you avoid using template refs for reactive data in Vue 3?

Which statement best explains why template refs should not be used as the main way to manage reactive data in Vue 3?

A Template refs point to DOM elements and do not trigger reactivity updates when their properties change.

B Template refs automatically update reactive data, so using them causes infinite loops.

C Template refs are deprecated in Vue 3 and should not be used at all.

D Template refs can only be used inside <code>&lt;script&gt;</code> tags, not <code>&lt;script setup&gt;</code>.

💡 Hint

Think about how Vue tracks changes and updates the UI.

Template refs give direct access to DOM elements but do not create reactive data bindings. Changes to DOM properties accessed via refs do not trigger Vue's reactivity system, so they should not be used to manage reactive state.

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