Reactive data with ref in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive reference for a count variable.

Vue

<script setup>
import { [1] } from 'vue'
const count = ref(0)
</script>

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

Areactive

Bref

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for a primitive value.

Trying to import a function that doesn't exist.

The ref function creates a reactive reference to a value, allowing Vue to track changes.

2fill in blank

medium

Complete the template to display the reactive count value.

Vue

<template>
  <p>Count is: {{ [1] }}</p>
</template>

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

Acount

Bcount.value()

Ccount()

Dcount.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using count without .value in the template.

Trying to call count as a function.

When using ref, you access the actual value with .value.

3fill in blank

hard

Fix the error in updating the reactive count value inside a method.

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count[1] 1
}
</script>

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

A+=

B++

C-=

D=

Attempts:

3 left

💡 Hint

Common Mistakes

Using ++ directly on count without .value.

Using = instead of += causing overwrite.

To update the value inside a ref, use count.value += 1. The blank is for the operator between count.value and 1.

4fill in blank

hard

Fill both blanks to correctly update the reactive count value by 1.

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count[1] [2] 1
}
</script>

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

A.value

B+=

C-=

D++

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to use .value.

Using ++ operator incorrectly on ref.

You must access count.value to update the inner value, then use += to add 1.

5fill in blank

hard

Fill all three blanks to create a reactive count, display it, and update it on button click.

Vue

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

<script setup>
import { ref } from 'vue'
const count = ref(0)
function [2]() {
  count[3] 1
}
</script>

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

Acount.value

Bincrement

C+=

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using count instead of count.value in template.

Mismatch between function name in template and script.

Forgetting to use .value when updating.

The template shows count.value to display the reactive value. The button calls the increment function, which updates count.value += 1.