Why state management is needed in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive state variable in Vue.

Vue

const count = [1](0);

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

Awatch

Bref

Ccomputed

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for primitive values.

Using computed when you want a simple reactive variable.

In Vue, ref is used to create a reactive primitive value like a number.

2fill in blank

medium

Complete the code to update the reactive state variable in Vue.

Vue

count[1] = count[1] + 1;

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

A()

B[0]

C.value

D{}

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to update the ref variable directly without .value.

Using parentheses or brackets instead of .value.

When using ref, you access or update the value with .value.

3fill in blank

hard

Fix the error in the code to share state between components using Vue's provide/inject.

Vue

provide('count', [1]);

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

Areactive(count)

Bref(count)

Ccount.value

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Providing count.value instead of count.

Wrapping count again in ref or reactive.

You provide the reactive reference itself, not its value, so child components stay reactive.

4fill in blank

hard

Fill both blanks to create a computed property that doubles the count.

Vue

const doubleCount = computed(() => count[1] * [2]);

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

A.value

B2

C3

D.value()

Attempts:

3 left

💡 Hint

Common Mistakes

Using .value() which is not a function.

Multiplying by 3 instead of 2.

Access the reactive value with .value and multiply by 2 to double it.

5fill in blank

hard

Fill all three blanks to create a reactive object with a name and age, and update age.

Vue

const person = reactive({ name: '[1]', age: [2] });
person.[3] = 30;

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

AAlice

B25

Cage

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number without quotes for name.

Trying to update the name instead of age.

Create a reactive object with name 'Alice' and age 25, then update the age property to 30.