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.

Practice

1.

What is the main purpose of a computed property with both get and set in Vue?

easy

A. To create a reactive property that can both read and update data

B. To define a method that runs only once

C. To store static values that never change

D. To replace the data object entirely

Solution

1. Step 1: Understand computed properties

   Computed properties in Vue are reactive and can automatically update when dependencies change.

2. Step 2: Role of getter and setter

   Using both get and set allows reading the value and updating related data reactively.

3. Final Answer:

   To create a reactive property that can both read and update data -> Option A

4. Quick Check:

   Computed with get/set = reactive read and write [OK]

Hint: Remember: get reads, set writes reactive data [OK]

Common Mistakes:

• Thinking computed properties are static
• Confusing computed with methods
• Believing set is optional for writing data

2.

Which of the following is the correct syntax to define a computed property with a getter and setter in Vue 3 using <script setup>?

const fullName = computed({
  get() {
    return this.firstName + ' ' + this.lastName
  },
  set(value) {
    const names = value.split(' ')
    this.firstName = names[0]
    this.lastName = names[1]
  }
})

easy

A. Use arrow functions for get and set

B. Correct as is

C. Remove set, only get is allowed

D. Use function keyword without commas

Solution

1. Step 1: Check computed property syntax

   Vue 3 allows computed properties with an object containing get and set methods.

2. Step 2: Validate the example code

   The code correctly defines get and set as functions inside an object passed to computed().

3. Final Answer:

   Correct as is -> Option B

4. Quick Check:

   Object with get/set inside computed = correct syntax [OK]

Hint: Use object with get and set functions inside computed() [OK]

Common Mistakes:

• Using arrow functions that break 'this' context
• Omitting commas between get and set
• Trying to define computed as a single function

3.

Given this Vue 3 <script setup> code, what will be the console output after fullName.value = 'Jane Doe'?

import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Smith')

const fullName = computed({
  get() {
    return firstName.value + ' ' + lastName.value
  },
  set(value) {
    const names = value.split(' ')
    firstName.value = names[0]
    lastName.value = names[1]
  }
})

fullName.value = 'Jane Doe'
console.log(firstName.value, lastName.value)

medium

A. 'Jane Doe' 'Doe'

B. Error: Cannot assign to computed property

C. 'Jane' 'Doe'

D. 'John' 'Smith'

Solution

1. Step 1: Understand the setter logic

   Setting fullName.value splits the string into ['Jane', 'Doe'] and assigns to firstName.value and lastName.value.

2. Step 2: Check console.log output

   After assignment, firstName.value is 'Jane' and lastName.value is 'Doe', so console logs 'Jane Doe'.

3. Final Answer:

   'Jane' 'Doe' -> Option C

4. Quick Check:

   Setter splits and assigns names = 'Jane' 'Doe' [OK]

Hint: Setter splits string and updates refs accordingly [OK]

Common Mistakes:

• Expecting full string in firstName
• Thinking computed properties are read-only
• Confusing ref.value and computed.value

4.

What is wrong with this computed property definition in Vue 3?

const fullName = computed({
  get: () => {
    return firstName.value + ' ' + lastName.value
  },
  set: (value) => {
    const names = value.split(' ')
    firstName.value = names[0]
    lastName.value = names[1]
  }
})

medium

A. Arrow functions break the reactivity context for get and set

B. Missing commas between get and set

C. Cannot use computed with set method

D. Must use async functions for get and set

Solution

1. Step 1: Analyze arrow function usage

   Arrow functions do not bind their own this, which can break reactivity when accessing reactive refs inside get/set.

2. Step 2: Understand Vue reactivity context

   Using normal function syntax ensures correct reactivity and access to reactive data.

3. Final Answer:

   Arrow functions break the reactivity context for get and set -> Option A

4. Quick Check:

   Use normal functions, not arrow, for computed get/set [OK]

Hint: Avoid arrow functions in computed get/set [OK]

Common Mistakes:

• Using arrow functions for get/set
• Thinking commas are missing
• Believing set is not allowed

5.

You want to create a computed property fullName that updates firstName and lastName refs, but also trims extra spaces and handles single names gracefully. Which computed property definition is best?

const fullName = computed({
  get() {
    return `${firstName.value.trim()} ${lastName.value.trim()}`.trim()
  },
  set(value) {
    const names = value.trim().split(/\s+/)
    firstName.value = names[0] || ''
    lastName.value = names.slice(1).join(' ') || ''
  }
})

hard

A. Setter should not use slice, only split

B. It will fail if value is empty string

C. Getter should not trim values

D. This handles trimming and single names correctly

Solution

1. Step 1: Check trimming in getter

   The getter trims both first and last names and then trims the combined string to avoid extra spaces.

2. Step 2: Analyze setter logic

   The setter trims input, splits by spaces, assigns first word to firstName, and joins the rest for lastName, handling single names gracefully.

3. Final Answer:

   This handles trimming and single names correctly -> Option D

4. Quick Check:

   Trim and split with fallback = robust computed set/get [OK]

Hint: Trim inputs and handle missing last name with slice [OK]

Common Mistakes:

• Not trimming input causing extra spaces
• Failing on single-word names
• Using split without regex for multiple spaces