Vue 之 Computed Setter 只能寫入 Data | 點燈坊

當使用 Computed 的 Setter 時，只能用來寫入 Data，不能直接 return 值。

Version

Vue 2.7

Computed Setter

<template>
  <div>
    <input type="text" v-model.number="score1">
    <input type="text" v-model.number="score2">
    {{ total }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      score1: 0,
      score2: 0
    }
  },
  computed: {
    total: {
      get() {
        return this.score1 + this.score2
      },
      set(value) {
        this.score1 = value
      }
    }
  },
  mounted() {
    this.total = 20
  }
}
</script>

Line 22

set(value) {
  this.score1 = value
}

當使用 Computed Setter 時，傳入的 value 只能用來寫入 Data，再由 Computed Getter 回傳 Computed，不能直接使用 return 回傳。

Conclusion

• 直覺會在 Computed Setter 寫 return 回傳 Computed，但事實上只能用來寫入 Data