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.