Vue.js 3表单v-model绑定REST缺失数据时报undefined错误如何解决

问题根本原因 #

你报错的本质是直接用接口返回的不完整对象覆盖了data中初始化的完整info对象：你在data里给info定义了带默认值的address嵌套对象，但在created中直接执行this.info = 接口返回对象时，返回对象没有address字段，就会直接把原info里的address整个抹掉，模板访问info.address.street时自然就会抛出undefined错误。

你之前在Svelte中用展开运算符处理不会出问题，本质是做了对象合并，没有直接替换整个带默认值的对象，Vue中也可以用同类逻辑处理，不需要额外开启任何特殊配置。

常用解决方案 #

• 方案1：手动合并对象（推荐，层级较浅时用）
  赋值时不要直接替换整个info对象，将接口返回的字段和原有默认值做合并，嵌套层级单独处理即可：

  created() {
    // 假设接口返回数据存在res变量中
    const res = {
      firstname: "Micheal",
      lastname: "Jordan",
    }
    this.info = {
      ...this.info,
      ...res,
      // 嵌套对象也要合并默认值
      address: {
        ...this.info.address,
        ...res.address
      }
    }
  }
  

• 方案2：用深层合并工具（适合嵌套层级多的场景）
  如果对象嵌套层级多，手动写合并逻辑太繁琐，可以直接用成熟的深层合并工具：

  // 安装lodash-es后导入，比全量lodash更轻量化
  import { merge } from 'lodash-es'
  
  created() {
    const res = { /* 接口返回数据 */ }
    // merge会自动保留原对象中不存在于返回值的字段，不需要手动处理嵌套
    this.info = merge(this.info, res)
  }
  

• 方案3：模板层兜底兼容
  如果不想改赋值逻辑，也可以直接在模板中用Vue3支持的可选链语法做兜底，避免访问不存在的字段时报错：

  <template>
  <div v-if="info">
    <form>
      <input type="text" v-model="info.firstname">
      <input type="text" v-model="info.lastname">
      <input type="text" v-model="info.address?.street ?? ''">
      <input type="text" v-model="info.address?.city ?? ''">
      <input type="text" v-model="info.address?.postalCode ?? ''">
      <button type="submit">Submit</button> 
    </form>
  </div>
  </template>
  

内容的提问来源于stack exchange，提问作者Steve S.