Reactive objects with reactive in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive object named state.

Vue

import { reactive } from 'vue';

const state = [1]({ count: 0 });

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

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref instead of reactive for objects

Forgetting to import reactive from 'vue'

Use reactive to create a reactive object in Vue.

2fill in blank

medium

Complete the code to update the count property reactively.

Vue

state.[1] = 5;

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

Acount

Bvalue

Cset

Dupdate

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign to a non-existent property like 'value'

Using methods like set or update which do not exist

Access the property count directly on the reactive object to update it.

3fill in blank

hard

Fix the error in the code to correctly create a reactive object.

Vue

const state = reactive([1]);

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

A[count: 0]

B(count: 0)

C{ count: 0 }

D"count: 0"

Attempts:

3 left

💡 Hint

Common Mistakes

Using array or parentheses instead of object literal

Passing a string instead of an object

The argument to reactive must be an object literal with curly braces.

4fill in blank

hard

Fill both blanks to create a reactive object with a nested property and update it.

Vue

const state = reactive({ user: { name: 'Alice' } });
state.user.[1] = [2];

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

Aname

B'Bob'

C'Alice'

Dage

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to update a non-existent property

Forgetting quotes around string values

Update the nested property name to the new value 'Bob'.

5fill in blank

hard

Fill all three blanks to create a reactive object and add a new property reactively.

Vue

const state = reactive({ count: 0 });
state.[1] = [2];
console.log(state.[3]);

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

Amessage

B'Hello'

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using different property names when assigning and logging

Forgetting quotes around string values

Add a new reactive property message with value 'Hello' and log it.