Vue 3中条件式v-model兼容方案求助（Vue 2迁移场景）

问题原因 #

Vue 3 对 v-model 的绑定表达式有严格限制，要求必须是可赋值的引用类型（比如响应式变量、对象属性）。而 initial && initial.FirstName 是一个条件表达式：当 initial 为空时返回 falsy 值（不可写），即使 initial 存在，这个表达式也不属于直接可赋值的引用，因此会触发报错。

以下是几种可行的替代方案：

方案1：使用计算属性（推荐） #

通过计算属性封装读写逻辑，既保证安全访问，又满足 v-model 对可写绑定的要求：

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

<script setup>
import { ref, computed } from 'vue'
// 假设 initial 是响应式对象（如果不是，建议用 ref/reactive 包裹）
const initial = ref({ FirstName: 'John' })

const firstName = computed({
  get() {
    // 可选链安全访问，空值合并给默认空字符串
    return initial.value?.FirstName ?? ''
  },
  set(newValue) {
    // 仅当 initial 存在时才更新属性
    if (initial.value) {
      initial.value.FirstName = newValue
    }
  }
})
</script>

方案2：条件渲染 + 直接绑定 #

如果业务允许，通过 v-if 控制输入框的渲染，仅当 initial 存在时绑定其属性：

<template>
  <!-- initial 存在时绑定原属性 -->
  <input v-if="initial" v-model="initial.FirstName" />
  <!-- initial 为空时显示空输入框，可绑定临时变量后续处理 -->
  <input v-else v-model="tempFirstName" placeholder="请先初始化数据" />
</template>

<script setup>
import { ref } from 'vue'
const initial = ref(null)
const tempFirstName = ref('')
</script>

方案3：手动实现双向绑定 #

用 :value 和 @input 替代 v-model，手动处理值的读取和更新：

<template>
  <input 
    :value="initial?.FirstName ?? ''"
    @input="updateFirstName"
  />
</template>

<script setup>
import { ref } from 'vue'
const initial = ref({ FirstName: 'Jane' })

const updateFirstName = (e) => {
  if (initial.value) {
    initial.value.FirstName = e.target.value
  }
}
</script>

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