Typing computed properties in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a computed property using Vue's Composition API.

Vue

<script setup lang="ts">
import { ref, computed } from 'vue'
const count = ref(0)
const doubleCount = computed(() => count.value[1]2)
</script>

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

A+

B*

C-

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using + instead of * will add 2 instead of doubling.

Using - or / will produce incorrect results.

The computed property doubleCount multiplies count by 2 using the * operator.

2fill in blank

medium

Complete the code to type a computed property that returns a string.

Vue

<script setup lang="ts">
import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed<string>(() => firstName.value + ' ' + [1].value)
</script>

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

AfirstName

BfullName

ClastName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using firstName twice will duplicate the first name.

Using fullName inside its own definition causes errors.

The computed property fullName concatenates firstName and lastName. We use lastName here to complete the full name.

3fill in blank

hard

Fix the error in typing the computed property that returns a number.

Vue

<script setup lang="ts">
import { ref, computed } from 'vue'
const items = ref<number[]>([1, 2, 3])
const total = computed<number>(() => items.value.reduce((acc, cur) => acc + cur, [1]))
</script>

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

A''

Bundefined

Cnull

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using an empty string or null as initial value causes runtime errors.

Omitting the initial value can cause errors if the array is empty.

The reduce function needs a starting number 0 to sum the array correctly.

4fill in blank

hard

Fill both blanks to type a computed property that filters an array of strings by length.

Vue

<script setup lang="ts">
import { ref, computed } from 'vue'
const words = ref<string[]>(['apple', 'banana', 'cherry', 'date'])
const longWords = computed<string[]>(() => words.value.filter(word => word.length [1] [2]))
</script>

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

A>

B5

C<

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using < instead of > will filter shorter words.

Using 3 instead of 5 changes the filter criteria.

The computed property filters words with length greater than 5.

5fill in blank

hard

Fill all three blanks to type a computed property that creates an object mapping words to their uppercase versions for words longer than 4 characters.

Vue

<script setup lang="ts">
import { ref, computed } from 'vue'
const words = ref<string[]>(['vue', 'react', 'angular', 'svelte'])
const upperMap = computed<Record<string, string>>(() => {
  return Object.fromEntries(words.value.filter(word => word.length [1] [2]).map(word => [[3], word.toUpperCase()]))
})
</script>

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

A>

B4

Cword

Dword.length

Attempts:

3 left

💡 Hint

Common Mistakes

Using word.length as key will cause keys to be numbers, not words.

Using < instead of > changes the filter logic.

The computed property filters words longer than 4 characters and maps each word to its uppercase version using the word itself as the key.