Computed properties for derived state in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a computed property that returns the reversed message.

Vue

<script setup>
import { ref, computed } from 'vue'
const message = ref('hello')
const reversedMessage = computed(() => [1])
</script>

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

Amessage.reverse()

Bmessage.split('').reverse().join('')

Cmessage.value.split('').reverse().join('')

Dmessage.value.reverse()

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to use .value on the ref

Trying to reverse the ref directly without splitting

The computed property must access the reactive value with .value and then reverse the string.

2fill in blank

medium

Complete the code to create a computed property that returns the full name by combining firstName and lastName.

Vue

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed(() => [1])
</script>

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

AfirstName + ' ' + lastName

BfirstName.value + ' ' + lastName.value

CfirstName.value.concat(lastName.value)

DfirstName + lastName

Attempts:

3 left

💡 Hint

Common Mistakes

Concatenating refs directly without .value

Forgetting the space between first and last name

Access the values of both refs and join them with a space to form the full name.

3fill in blank

hard

Fix the error in the computed property that should return the uppercase version of the input text.

Vue

<script setup>
import { ref, computed } from 'vue'
const inputText = ref('vue')
const upperText = computed(() => [1])
</script>

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

AinputText.toUpperCase()

BinputText.upper()

CinputText.value.upper()

DinputText.value.toUpperCase()

Attempts:

3 left

💡 Hint

Common Mistakes

Calling string methods directly on the ref without .value

Using a non-existent method like upper()

You must use .value to access the string inside the ref and then call toUpperCase() on it.

4fill in blank

hard

Fill in the blank to create a computed property that returns the number of vowels in the message.

Vue

<script setup>
import { ref, computed } from 'vue'
const message = ref('hello world')
const vowelCount = computed(() => {
  return message.value.split('').filter(char => 'aeiou' [1] char).length
})
</script>

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

Aincludes

BstartsWith

CindexOf

DendsWith

Attempts:

3 left

💡 Hint

Common Mistakes

Using methods that check only start or end of string

Using indexOf but forgetting to check for -1

The includes method checks if the character is one of the vowels.

5fill in blank

hard

Fill all three blanks to create a computed property that returns an object mapping each word to its length, but only for words longer than 3 characters.

Vue

<script setup>
import { ref, computed } from 'vue'
const sentence = ref('Learn Vue with fun exercises')
const wordLengths = computed(() => {
  return sentence.value.split(' ').reduce((acc, [1]) => {
    if ([2].length > 3) {
      acc[[3]] = [2].length
    }
    return acc
  }, {})
})
</script>

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

Aword

Dsentence

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names inconsistently

Using the whole sentence instead of individual words

Use the variable word consistently to represent each word in the array.

Practice

1. What is the main purpose of a computed property in Vue?

easy

A. To directly modify the DOM elements

B. To store static data that never changes

C. To create a value that updates automatically when its dependencies change

D. To replace methods for event handling

Solution

1. Step 1: Understand computed property role

   Computed properties automatically update when their reactive dependencies change, unlike static data.

2. Step 2: Compare with other options

   Static data does not update automatically, DOM manipulation is done differently, and event handling uses methods or event listeners.

3. Final Answer:

   To create a value that updates automatically when its dependencies change -> Option C

4. Quick Check:

   Computed properties = auto-updating values [OK]

Hint: Computed properties auto-update when data changes [OK]

Common Mistakes:

• Thinking computed properties store static data
• Confusing computed with methods for events
• Assuming computed directly changes the DOM

2. Which of the following is the correct syntax to define a computed property named fullName using Vue's Composition API?

easy

A. const fullName = computed(() => firstName + ' ' + lastName)

B. const fullName = computed { return firstName + ' ' + lastName }

C. const fullName = computed(() => { firstName + ' ' + lastName })

D. const fullName = computed(() => firstName.concat(lastName))

Solution

1. Step 1: Check correct computed syntax

   Vue's computed expects a function returning a value, so arrow function with parentheses and return expression is correct.

2. Step 2: Analyze each option

   const fullName = computed(() => fullName + ' ' + lastName) uses arrow function returning concatenated string correctly. const fullName = computed { return firstName + ' ' + lastName } has wrong syntax (missing parentheses). const fullName = computed(() => { firstName + ' ' + lastName }) lacks return statement in block. const fullName = computed(() => firstName.concat(lastName)) uses concat without space.

3. Final Answer:

   const fullName = computed(() => firstName + ' ' + lastName) -> Option A

4. Quick Check:

   Correct computed syntax = const fullName = computed(() => firstName + ' ' + lastName) [OK]

Hint: Use arrow function with return expression inside computed [OK]

Common Mistakes:

• Omitting parentheses in computed call
• Forgetting return in block arrow function
• Using string concat without space

3. Given the following Vue setup code, what will be the output of fullName.value?

import { ref, computed } from 'vue'
const firstName = ref('Jane')
const lastName = ref('Doe')
const fullName = computed(() => firstName.value + ' ' + lastName.value)

firstName.value = 'John'

medium

A. undefined

B. "Jane Doe"

C. "Jane John"

D. "John Doe"

Solution

1. Step 1: Understand reactive refs and computed

   firstName and lastName are reactive refs. Changing firstName.value updates computed fullName automatically.

2. Step 2: Evaluate fullName after update

   After setting firstName.value = 'John', fullName.value becomes 'John Doe' because computed uses current ref values.

3. Final Answer:

   "John Doe" -> Option D

4. Quick Check:

   Computed updates with ref changes = "John Doe" [OK]

Hint: Computed reflects latest ref values automatically [OK]

Common Mistakes:

• Assuming computed keeps old value
• Ignoring .value when accessing refs
• Confusing variable names in output

4. Identify the error in this Vue computed property code:

import { ref, computed } from 'vue'
const count = ref(0)
const doubleCount = computed(() => {
  count + 2
})

medium

A. Missing return statement inside computed function

B. count should not be a ref

C. computed should be imported from 'vuex'

D. doubleCount should be a method, not computed

Solution

1. Step 1: Check computed function body

   The arrow function uses braces but does not return a value explicitly, so it returns undefined.

2. Step 2: Correct usage

   Either remove braces or add a return statement to return count.value + 2.

3. Final Answer:

   Missing return statement inside computed function -> Option A

4. Quick Check:

   Computed with braces needs return [OK]

Hint: Add return when using braces in arrow function [OK]

Common Mistakes:

• Forgetting return in block arrow functions
• Importing computed from wrong package
• Misusing ref as normal variable

5. You have a list of products with prices and quantities as refs. How would you create a computed property totalPrice that sums the product of price and quantity for all products? Choose the correct computed property code snippet:

hard

A. const totalPrice = computed(() => products.reduce((sum, p) => sum + p.price * p.quantity, 0))

B. const totalPrice = computed(() => products.value.reduce((sum, p) => sum + p.price.value * p.quantity.value, 0))

C. const totalPrice = computed(() => { products.value.forEach(p => sum += p.price.value * p.quantity.value); return sum })

D. const totalPrice = computed(() => products.value.map(p => p.price.value * p.quantity.value))

Solution

1. Step 1: Understand data structure and refs

   Each product has price and quantity as refs, so access with .value. products is a ref array, so use products.value.

2. Step 2: Choose correct aggregation method

   Use reduce to sum all price * quantity values. const totalPrice = computed(() => products.value.reduce((sum, p) => sum + p.price.value * p.quantity.value, 0)) correctly uses reduce with .value access and initial sum 0.

3. Step 3: Analyze incorrect options

   const totalPrice = computed(() => products.reduce((sum, p) => sum + p.price * p.quantity, 0)) misses .value on refs. const totalPrice = computed(() => { products.value.forEach(p => sum += p.price.value * p.quantity.value); return sum }) uses forEach but sum is undefined. const totalPrice = computed(() => products.value.map(p => p.price.value * p.quantity.value)) returns array, not sum.

4. Final Answer:

   const totalPrice = computed(() => products.value.reduce((sum, p) => sum + p.price.value * p.quantity.value, 0)) -> Option B

5. Quick Check:

   Use reduce with .value refs to sum totals [OK]

Hint: Use reduce with .value to sum reactive refs [OK]

Common Mistakes:

• Forgetting .value on refs inside products
• Using map instead of reduce for sum
• Not initializing sum in reduce