Composable accepting parameters in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a composable that accepts a parameter.

Vue

import { ref } from 'vue'

export function useCounter(initialValue) {
  const count = ref([1])
  function increment() {
    count.value++
  }
  return { count, increment }
}

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

A0

BinitialValue

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using a fixed number like 0 instead of the parameter

Using undefined or null which does not use the parameter

The composable uses the passed initialValue parameter to set the initial count.

2fill in blank

medium

Complete the code to accept a parameter and return a computed value based on it.

Vue

import { computed } from 'vue'

export function useGreeting(name) {
  const greeting = computed(() => `Hello, [1]!`)
  return { greeting }
}

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

Aname

Bname.value

Cthis.name

Dgreeting

Attempts:

3 left

💡 Hint

Common Mistakes

Using name.value which is for refs

Using this.name which is not valid here

The parameter name is a plain string, so use it directly inside the template literal.

3fill in blank

hard

Fix the error in the composable that accepts a ref parameter and returns a reactive doubled value.

Vue

import { computed } from 'vue'

export function useDouble(count) {
  const double = computed(() => count[1] * 2)
  return { double }
}

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

A->value

Bvalue

C.value

D=>value

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting .value causing runtime errors

Using arrow or other invalid syntax

When using a ref parameter, access its value with .value inside computed.

4fill in blank

hard

Fill both blanks to create a composable that accepts a ref and returns a computed greeting with reactive name.

Vue

import { computed } from 'vue'

export function useReactiveGreeting(nameRef) {
  const greeting = computed(() => `Hi, [1]!`)
  return { greeting }
}

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

AnameRef.value

BnameRef()

CnameRef.val

DnameRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using nameRef directly which returns the ref object

Using nameRef() which is invalid for refs

To get the current value of a ref, use .value.

5fill in blank

hard

Fill all three blanks to create a composable that accepts a parameter, uses a ref, and returns a function to update it.

Vue

import { ref } from 'vue'

export function useName(initialName) {
  const name = ref([1])
  function setName(newName) {
    name[2] = [3]
  }
  return { name, setName }
}

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

AinitialName

B.value

CnewName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning directly to name instead of name.value

Using wrong variable names in assignment

The ref name is initialized with initialName. To update it, assign newName to name.value.