Computed in Composition API in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the computed function from Vue.

Vue

import { [1] } from 'vue';

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

Acomputed

Bref

Creactive

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ref' instead of 'computed' to create computed properties.

Forgetting to import 'computed' from 'vue'.

The computed function is imported from Vue to create computed properties in the Composition API.

2fill in blank

medium

Complete the code to define a computed property that returns the double of count.

Vue

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

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

Athis.count

Bcount.value

Ccount

Dcount()

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'count' without '.value' which returns the ref object.

Trying to call 'count()' as if it were a function.

In Composition API, to access the value inside a ref, you use .value. So count.value is correct.

3fill in blank

hard

Fix the error in the computed property by completing the blank.

Vue

const greeting = computed(() => `Hello, [1]!`);

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

Aname

Bname()

Cthis.name

Dname.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'name' without '.value' inside the template string.

Trying to use 'this.name' which is not available in Composition API functions.

Since name is a ref, you must use name.value inside computed to get the actual string.

4fill in blank

hard

Fill both blanks to create a computed property that returns the full name by joining firstName and lastName.

Vue

const fullName = computed(() => [1].value + ' ' + [2].value);

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

AfirstName

BlastName

CfullName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using the computed property name inside its own function causing infinite recursion.

Forgetting to add '.value' to the refs.

The computed property accesses firstName.value and lastName.value to join them with a space.

5fill in blank

hard

Fill all three blanks to create a computed property that filters an array of numbers to only positive even numbers.

Vue

const evenNumbers = computed(() => [1].value.filter(num => num [2] 2 === 0 && num [3] 0));

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

Anumbers

B%

C>

D==

Attempts:

3 left

💡 Hint

Common Mistakes

Using '==' instead of '===' for strict equality.

Forgetting to use '.value' on the ref array.

Using '<' instead of '>' to filter positive numbers.

The computed property accesses numbers.value and filters for numbers where num % 2 === 0 and num > 0.