Watchers for side effects in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to watch the 'count' signal and log its value when it changes.

Vue

import { ref, watch } from 'vue';
const count = ref(0);
watch([1], (newVal) => {
  console.log('Count changed to:', newVal);
});

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

A() => count.value

Bcount.value

C() => count

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the signal directly instead of a function.

Passing the raw value instead of a function.

In Vue 3, to watch a signal's value, you pass a function returning the value, like () => count.value.

2fill in blank

medium

Complete the code to watch the 'name' signal and update 'greeting' when 'name' changes.

Vue

import { ref, watch } from 'vue';
const name = ref('Alice');
const greeting = ref('');
watch([1], (newName) => {
  greeting.value = `Hello, ${newName}!`;
});

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

Aname

Bname.value

C() => name.value

D() => name

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the signal directly without a function.

Passing the raw value instead of a function.

The watcher needs a function returning the reactive value, so () => name.value is correct.

3fill in blank

hard

Fix the error in the watcher to correctly watch 'age' and log changes.

Vue

import { ref, watch } from 'vue';
const age = ref(30);
watch(age, (newAge) => {
  console.log('Age is now', [1]);
});

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

Aage

BnewAge

Cage.value

Dage()

Attempts:

3 left

💡 Hint

Common Mistakes

Using the signal variable instead of the callback parameter.

Trying to access .value inside the callback parameter.

The watcher callback receives the new value as the first argument, so use newAge to log the updated age.

4fill in blank

hard

Fill both blanks to watch 'status' and run a side effect only when 'status' changes to 'active'.

Vue

import { ref, watch } from 'vue';
const status = ref('inactive');
watch([1], (newStatus) => {
  if (newStatus [2] 'active') {
    console.log('Status is active now');
  }
});

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

A() => status.value

Bstatus

C===

D==

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the signal directly instead of a function.

Using loose equality (==) instead of strict (===).

Use a function returning status.value to watch the signal, and strict equality === to check the new value.

5fill in blank

hard

Fill all three blanks to create a watcher on 'inputValue' that trims the value and updates 'cleanValue' only if trimmed is not empty.

Vue

import { ref, watch } from 'vue';
const inputValue = ref('');
const cleanValue = ref('');
watch([1], (val) => {
  const trimmed = val[2]();
  if (trimmed [3] '') {
    cleanValue.value = trimmed;
  }
});

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

A() => inputValue.value

Btrim

C!==

D===

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the signal directly instead of a function.

Forgetting to call the trim method with parentheses.

Using loose equality instead of strict inequality.

The watcher watches inputValue.value via a function, trims the string with trim(), and checks if trimmed is not empty using !==.