Vue3中v-model绑定函数报错如何实现？可行解决方案

v-model 是 Vue 的双向绑定语法糖，实际等价于同时绑定 :value 属性和监听 @input 事件，要求绑定的值必须是可被赋值的变量/成员表达式，直接传入函数返回值属于只读表达式，无法完成回写逻辑，因此编译器会抛出对应错误。

方案1：使用计算属性的 get/set 实现（推荐） #

通过计算属性的 getter 处理输出值，setter 处理输入回写逻辑，完全符合 v-model 的绑定要求：

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

<script>
export default{
  data() {
    return {
      name: 'Jhon'
    }
  },
  computed: {
    helloText: {
      get() {
        return `Hello ${this.name}`
      },
      set(inputValue) {
        // 可自定义回写逻辑，示例为去掉输入内容的Hello前缀后赋值给name
        this.name = inputValue.replace(/^Hello /, '')
      }
    }
  }
}
</script>

方案2：手动拆分v-model语法糖 #

不使用v-model语法糖，分别绑定值和输入事件，适合简单的临时处理场景，可直接复用原有方法：

<template>
  <input :value="sayHello(name)" @input="handleInput">
</template>

<script>
export default{
  data() {
    return {
      name: 'Jhon'
    }
  },
  methods:{
    sayHello(name){
      return "Hello "+ name
    },
    handleInput(e) {
      const inputValue = e.target.value
      // 自定义输入处理逻辑
      this.name = inputValue.replace(/^Hello /, '')
    }
  }
}
</script>

补充：Vue3 组合式API写法示例 #

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

<script setup>
import { ref, computed } from 'vue'

const name = ref('Jhon')
const helloText = computed({
  get: () => `Hello ${name.value}`,
  set: (inputValue) => {
    name.value = inputValue.replace(/^Hello /, '')
  }
})
</script>

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