Debounced watchers pattern in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the debounce function from lodash.

Vue

import { [1] } from 'lodash-es';

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

Areactive

Bwatch

Cref

Ddebounce

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'watch' instead of 'debounce'.

Forgetting to import debounce at all.

The debounce function is imported from lodash-es to delay the watcher callback.

2fill in blank

medium

Complete the code to create a reactive variable named 'searchTerm'.

Vue

const searchTerm = [1]('');

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

Awatch

Bref

Ccomputed

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' for a string value.

Using 'computed' instead of a reactive variable.

Use ref to create a reactive primitive value like a string.

3fill in blank

hard

Fix the error in the watcher setup by completing the debounce call.

Vue

watch(searchTerm, debounce(() => {
  console.log('Search:', searchTerm.value);
}, [1]));

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

A1000

Bnull

C'1000'

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the delay as a string instead of a number.

Passing null or undefined which disables debounce.

The debounce delay must be a number (milliseconds), not a string or null.

4fill in blank

hard

Fill both blanks to create a debounced watcher that triggers on 'inputValue' changes with a 500ms delay.

Vue

watch([1], debounce(() => {
  console.log('Input changed:', [2].value);
}, 500));

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

AinputValue

BsearchTerm

CinputValue.value

DsearchTerm.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using '.value' in the watcher source argument.

Mixing different variable names.

The watcher listens to inputValue, and inside the callback we access inputValue.value to get the current value.

5fill in blank

hard

Fill all three blanks to create a debounced watcher that watches 'query', logs its uppercase value, and uses a 300ms delay.

Vue

watch([1], debounce(() => {
  console.log('Uppercase:', [2].value.[3]());
}, 300));

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

Aquery

CtoUpperCase

DtoLowerCase

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'toLowerCase' instead of 'toUpperCase'.

Forgetting to use '.value' to access the reactive value.

The watcher watches query. Inside the callback, we access query.value and call toUpperCase() to log the uppercase string.