Computed with getter and setter in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a computed property with a getter.

Vue

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

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

AfirstName

BlastName

CfullName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using firstName instead of lastName in the getter.

Using fullName inside its own getter causing recursion.

The getter returns the full name by combining firstName.value and lastName.value. So, lastName is the correct variable to use.

2fill in blank

medium

Complete the code to add a setter to the computed property.

Vue

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed({
  get() {
    return firstName.value + ' ' + lastName.value
  },
  set(value) {
    const names = value.split(' ')
    firstName.value = names[0]
    [1].value = names[1]
  }
})
</script>

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

AlastName

BfullName

CfirstName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning to firstName instead of lastName in the setter.

Assigning to fullName inside its own setter causing recursion.

The setter splits the full name and assigns the second part to lastName.value. So, lastName is the correct variable to update.

3fill in blank

hard

Fix the error in the computed property setter to avoid runtime issues.

Vue

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('Jane')
const lastName = ref('Smith')
const fullName = computed({
  get() {
    return firstName.value + ' ' + lastName.value
  },
  set(value) {
    const parts = value.split(' ')
    firstName.value = parts[0]
    [1] = parts[1]
  }
})
</script>

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

AlastName.value

BlastName

CfullName.value

DfirstName.value

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning directly to lastName instead of lastName.value.

Assigning to fullName.value inside its own setter.

The setter must assign to lastName.value to update the reactive reference. Assigning to lastName alone won't update the value.

4fill in blank

hard

Fill both blanks to create a computed property that capitalizes the full name and updates parts correctly.

Vue

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('alice')
const lastName = ref('johnson')
const fullName = computed({
  get() {
    return (firstName.value + ' ' + lastName.value).[1]()
  },
  set(value) {
    const parts = value.split(' ')
    firstName.value = parts[0].[2]()
    lastName.value = parts[1].toLowerCase()
  }
})
</script>

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

AtoUpperCase

BtoLowerCase

Ctrim

DcharAt

Attempts:

3 left

💡 Hint

Common Mistakes

Using toLowerCase in the getter instead of toUpperCase.

Using trim or charAt which do not change case.

The getter capitalizes the full name using toUpperCase(). The setter capitalizes the first name with toLowerCase() to normalize the last name.

5fill in blank

hard

Fill all three blanks to create a computed property that reverses the full name and updates parts with trimming.

Vue

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('Bob')
const lastName = ref('Marley')
const fullName = computed({
  get() {
    return (lastName.value + ' ' + firstName.value).[1]().split('').reverse().join('')
  },
  set(value) {
    const parts = value.split(' ').reverse()
    firstName.value = parts[0].[2]()
    lastName.value = parts[1].[3]()
  }
})
</script>

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

AtoLowerCase

Btrim

CtoUpperCase

DtrimStart

Attempts:

3 left

💡 Hint

Common Mistakes

Using toLowerCase in the getter which does not trim.

Not trimming strings before assigning in setter.

The getter trims the combined string start with trimStart() before reversing. The setter trims the first name and uppercases the last name to normalize them.