Template refs for DOM access in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a template ref named 'inputRef'.

Vue

<template>
  <input type="text" ref="[1]" />
</template>

Drag options to blanks, or click blank then click option'

AinputRef

BmyRef

CtextInput

DrefInput

Attempts:

3 left

💡 Hint

Common Mistakes

Using a ref name that doesn't match the script variable.

Forgetting to add the ref attribute.

The ref attribute in the template defines the name of the template ref. Here, it should be inputRef to match the usage.

2fill in blank

medium

Complete the code to import the correct function to create a template ref in Vue 3.

Vue

<script setup>
import { [1] } from 'vue'
const inputRef = [1](null)
</script>

Drag options to blanks, or click blank then click option'

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for DOM refs.

Forgetting to import the function.

The ref function is used to create a reactive reference to a DOM element or value in Vue 3.

3fill in blank

hard

Fix the error in accessing the DOM element's value using the template ref.

Vue

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

function showValue() {
  alert(inputRef.value.[1])
}
</script>

Drag options to blanks, or click blank then click option'

AinnerHTML

BtextContent

Cvalue

DinnerText

Attempts:

3 left

💡 Hint

Common Mistakes

Using textContent or innerHTML which are for element content, not input value.

For input elements, the property to get the typed text is value.

4fill in blank

hard

Fill both blanks to correctly focus the input element using the template ref.

Vue

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

function focusInput() {
  inputRef.value.[1]()
}
</script>

<template>
  <input type="text" ref="inputRef" @click="[2]" />
</template>

Drag options to blanks, or click blank then click option'

Afocus

BfocusInput

Cclick

Dblur

Attempts:

3 left

💡 Hint

Common Mistakes

Using click() method instead of focus().

Calling a wrong function name on click event.

The focus() method sets focus on the input element. The @click event calls the focusInput function.

5fill in blank

hard

Fill all three blanks to create a reactive template ref, assign it to the input, and log its value on button click.

Vue

<script setup>
import { [1] } from 'vue'
const inputRef = [2](null)

function logValue() {
  console.log(inputRef.value.[3])
}
</script>

<template>
  <input type="text" ref="inputRef" />
  <button @click="logValue">Log Value</button>
</template>

Drag options to blanks, or click blank then click option'

Aref

Cvalue

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref.

Accessing textContent instead of value.

Use ref to create the template ref and access the input's value property to get the typed text.