Computed with getter and setter in Vue - Mini Project: Build & Apply

Computed Property with Getter and Setter in Vue

📖 Scenario: You are building a simple Vue component that manages a user's full name. The full name is made by combining first and last names. You want to show the full name and also allow editing it in one input box.

🎯 Goal: Create a Vue component that uses a computed property with a getter and setter to combine firstName and lastName into fullName. When the user edits fullName, it should update firstName and lastName accordingly.

📋 What You'll Learn

Create reactive variables firstName and lastName with initial values

Create a computed property called fullName with a getter that returns the combined name

Add a setter to fullName that splits the input and updates firstName and lastName

Bind fullName to an input box in the template for two-way editing

💡 Why This Matters

🌍 Real World

This pattern is useful when you want to combine multiple pieces of data into one editable field, like full names, addresses, or formatted dates.

💼 Career

Understanding computed properties with getters and setters is essential for building reactive and user-friendly Vue applications, a common requirement in frontend development roles.

1

Setup reactive firstName and lastName

In the <script setup> section, create two reactive variables called firstName and lastName using Vue's ref. Set firstName to "John" and lastName to "Doe".

Vue

  
    
  



import { ref } from 'vue'

// Create reactive variables firstName and lastName
// Your code here

Hint

Use import { ref } from 'vue' and then const firstName = ref('John') and const lastName = ref('Doe').

2

Create computed fullName with getter

Import computed from Vue. Create a computed property called fullName with a getter that returns the combined string of firstName.value and lastName.value separated by a space.

Vue

  
    
  



import { ref, computed } from 'vue'

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

// Create computed fullName with getter
// Your code here

Hint

Use computed(() => `${firstName.value} ${lastName.value}`) to create the getter.

3

Add setter to fullName computed property

Modify the fullName computed property to have a setter function. The setter should take a string, split it by space into two parts, and update firstName.value and lastName.value accordingly. Use the computed function with an object containing get and set.

Vue

  
    
  



import { ref, computed } from 'vue'

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

// Change fullName to have getter and setter
// Your code here

Hint

Use computed({ get() { ... }, set(value) { ... } }) and split the input string.

4

Bind fullName to input in template

In the <template>, add an <input> element. Bind its v-model to the computed property fullName so that editing the input updates firstName and lastName.

Vue

  
    
    
  



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 parts = value.split(' ')
    firstName.value = parts[0] || ''
    lastName.value = parts[1] || ''
  }
})

Hint

Use <input v-model="fullName" /> to bind the input to the computed property.

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