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.