Vue计算属性setter未触发问题及代码修改请求

问题根源 #

1. 计算属性结构错误：带get/set的计算属性需直接传入包含两个方法的对象，原代码用箭头函数包裹get/set的写法不符合Vue规范，且get方法未返回值。
2. 赋值方式错误：computed返回的是响应式对象，必须通过.value属性赋值才能触发setter，直接赋值会覆盖响应式对象，导致后续操作失效。

修改后的完整代码 #

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <input v-model="inputFirstName" type="text" placeholder="Enter your name"/>
  <input v-model="inputLastName" type="text" placeholder="Enter your name"/>
  <span>fullName:{{fullname}}</span>
  <button @click="incrementNum">counter: {{counter}}</button>
</template>

<script>
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { computed, ref } from 'vue' 

const inputFirstName = ref("")
const inputLastName = ref("")
let counter = ref(0)

// 修正计算属性的定义方式
const fullname = computed({
  get() {
    // get方法必须返回值
    return inputFirstName.value + " " + inputLastName.value
  },
  set(value) {
    const splitted = value.split(" ")
    inputFirstName.value = splitted[0] 
    inputLastName.value = splitted[1] 
  }
})

const incrementNum = () => {
  counter.value++
  // 通过.value赋值触发setter
  fullname.value = `${counter.value} ${counter.value}`
}
</script>

关键修改点 #

• 将computed(() => {...})改为computed({ get(){...}, set(){...} })的正确结构，get方法添加return语句返回拼接后的全名。
• 在incrementNum函数中，通过fullname.value赋值，而非直接覆盖fullname变量，确保触发计算属性的setter方法。

内容的提问来源于stack exchange，提问作者Amrmsmb