Fix: Computed Property Has No Getter in Vue.js

What Causes This Warning?

This warning appears when you define a computed property that only has a setter but no getter. A computed property must have at least a getter function to read its value.

The Problem

// ❌ Computed with only setter
const fullName = computed({
  set(value) {
    const [first, last] = value.split(' ')
    firstName.value = first
    lastName.value = last
  }
  // Missing getter!
})

console.log(fullName.value) // Warning: no getter

The Fix

Add a Getter Function

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

// ✅ Computed with both getter and setter
const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(value) {
    const [first, last] = value.split(' ')
    firstName.value = first
    lastName.value = last
  }
})

If You Only Need a Getter

// ✅ Simple computed (getter only)
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})

Common Scenarios

Form Field Transformation

// ❌ Wrong - no getter
const formattedPrice = computed({
  set(value) {
    price.value = parseFloat(value.replace('$', ''))
  }
})

// ✅ Correct - has getter
const formattedPrice = computed({
  get() {
    return `$${price.value.toFixed(2)}`
  },
  set(value) {
    price.value = parseFloat(value.replace('$', ''))
  }
})

v-model with Computed

<script setup>
const store = useStore()

// ❌ Wrong - missing getter
const username = computed({
  set(value) {
    store.setUsername(value)
  }
})

// ✅ Correct - has getter
const username = computed({
  get() {
    return store.username
  },
  set(value) {
    store.setUsername(value)
  }
})
</script>

<template>
  <input v-model="username" />
</template>

Options API

// ❌ Wrong
export default {
  computed: {
    fullName: {
      set(value) {
        // ...
      }
      // Missing get()
    }
  }
}

// ✅ Correct
export default {
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName
      },
      set(value) {
        const [first, last] = value.split(' ')
        this.firstName = first
        this.lastName = last
      }
    }
  }
}

When to Use Setters

Use computed setters when you need to:

1. Transform input values before storing
2. Update multiple values from a single input
3. Create two-way binding with complex logic

// Transform input
const celsius = computed({
  get: () => fahrenheit.value * (9/5) + 32,
  set: (c) => { fahrenheit.value = (c - 32) * (5/9) }
})

// Update multiple values
const fullAddress = computed({
  get: () => `${street.value}, ${city.value}`,
  set: (addr) => {
    const [s, c] = addr.split(', ')
    street.value = s
    city.value = c
  }
})

Quick Checklist

• Every computed property needs a getter
• Use shorthand computed(() => ...) for getter-only
• Use object syntax { get, set } when setter is needed
• Getters should be pure functions (no side effects)
• Setters can modify reactive state