Loading states pattern in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a reactive loading state using Vue's Composition API.

Vue

import { [1] } from 'vue';

const isLoading = [1](false);

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

Awatch

Breactive

Ccomputed

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for a single boolean value.

Forgetting to import the function from 'vue'.

We use ref to create a simple reactive variable for loading state.

2fill in blank

medium

Complete the code to toggle the loading state to true when a function starts.

Vue

function fetchData() {
  isLoading.[1] = true;
  // simulate data fetch
}

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

Astate

Bloading

Cvalue

Dset

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign directly to the ref variable without .value.

Using a non-existent property like 'loading' or 'state'.

When using ref, the actual value is accessed and set via the .value property.

3fill in blank

hard

Fix the error in the template to show 'Loading...' only when loading is true.

Vue

<template>
  <div v-if="[1]">Loading...</div>
</template>

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

Aloading

BisLoading

Cisloading

Dload

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name with wrong casing.

Using a variable name that was never declared.

The reactive variable is named isLoading and must match exactly in the template.

4fill in blank

hard

Fill both blanks to create a reactive object with loading and data properties.

Vue

import { [1] } from 'vue';

const state = [2]({ loading: false, data: null });

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

Areactive

Bref

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing ref and reactive incorrectly.

Using computed or watch instead of reactive.

Use reactive to create a reactive object with multiple properties.

5fill in blank

hard

Fill all three blanks to create a loading state, fetch data asynchronously, and update the state.

Vue

import { [1] } from 'vue';

const isLoading = [2](false);

async function loadData() {
  isLoading.[3] = true;
  await fetch('https://api.example.com/data');
  isLoading.value = false;
}

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

Aref

Breactive

Cvalue

Dloading

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for a boolean.

Assigning to isLoading directly without .value.

We import and use ref to create isLoading. The value is accessed and set with .value.