Why templates matter in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a Vue component with a template.

Vue

<template>
  <div>{{ [1] }}</div>
</template>

<script setup>
const message = 'Hello Vue!'
</script>

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

Atext

Bmsg

Ccontent

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name not declared in the script.

Forgetting to use double curly braces for interpolation.

The template uses {{ message }} to display the reactive variable message.

2fill in blank

medium

Complete the code to bind a click event in the template.

Vue

<template>
  <button @click=[1]>Click me</button>
</template>

<script setup>
function handleClick() {
  alert('Clicked!')
}
</script>

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

AhandleClick

BclickHandler

ChandleClick()

D"handleClick"

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses which calls the function immediately.

Using quotes which treats it as a string, not a function.

Use @click=handleClick to bind the function without calling it immediately.

3fill in blank

hard

Fix the error in the template syntax to correctly display a list.

Vue

<template>
  <ul>
    <li v-for="item in [1]" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' }
]
</script>

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

Alist

BitemList

Citems

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name not declared in the script.

Adding curly braces inside the directive.

The v-for directive loops over the items array declared in the script.

4fill in blank

hard

Fill both blanks to create a reactive counter with a button.

Vue

<template>
  <div>
    <p>Count: {{ [1] }}</p>
    <button @click=[2]>Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>

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

Acount.value

Bincrement

Ccount

Dincrement()

Attempts:

3 left

💡 Hint

Common Mistakes

Using count.value instead of count in template.

Calling the function immediately with parentheses in the event.

Use count to display the reactive value and @click=increment to call the function on click.

5fill in blank

hard

Fill all three blanks to create a computed property and display it.

Vue

<template>
  <div>
    <p>Double: {{ [1] }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const number = ref(5)
const double = computed(() => [3][2]2)
</script>

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

Adouble.value

B*

C**

Dnumber.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using + instead of * for multiplication.

Not accessing reactive refs with .value.

Displaying the computed property without .value.

Display the computed value with double.value. Use multiplication * to double number.value.