如何处理Vue中用于v-model绑定的props内部的空嵌套属性问题

针对嵌套对象双向绑定为空报错、空对象提交冗余的问题，以下两种方案都可同时覆盖编辑、新增场景，无需逐字段校验：

方案1：按需初始化嵌套对象（推荐） #

通过带get/set的计算属性实现安全绑定，仅在用户实际输入对应字段时才初始化上层嵌套对象，从根源避免生成无用空对象：

export default {
  name: "EditPersonModal",
  props: {
    person: {
      type: Object,
      required: true
    }
  },
  computed: {
    city: {
      get() {
        // 取值时用可选链兜底，不会触发空指针报错
        return this.person.address?.city ?? ''
      },
      set(val) {
        // 仅赋值时才按需初始化address对象
        if (!this.person.address) {
          // Vue2环境需用$set保证响应式，Vue3可直接赋值
          this.$set(this.person, 'address', {})
        }
        this.person.address.city = val
      }
    },
    // state、zip字段可复用相同逻辑，也可封装通用函数批量生成计算属性
  }
}

模板内直接绑定计算属性即可：

<input v-model="city" />

如果嵌套字段较多，可以封装通用工具函数批量生成计算属性，减少重复代码：

// 通用安全绑定计算属性生成函数
function createSafeBinder (rootProp, path) {
  const pathSegments = path.split('.')
  return {
    get() {
      return pathSegments.reduce((prev, key) => prev?.[key], this[rootProp]) ?? ''
    },
    set(val) {
      let parent = this[rootProp]
      for (let i = 0; i < pathSegments.length - 1; i++) {
        const key = pathSegments[i]
        if (!parent[key]) {
          // Vue2替换为 this.$set(parent, key, {})
          parent[key] = {}
        }
        parent = parent[key]
      }
      parent[pathSegments.at(-1)] = val
    }
  }
}

// 组件内使用
computed: {
  city: createSafeBinder('person', 'address.city'),
  state: createSafeBinder('person', 'address.state'),
  zip: createSafeBinder('person', 'address.zip')
}

方案2：统一提交前清理空值 #

如果倾向于提前初始化所有嵌套对象简化绑定逻辑，可以写一个通用深度清理函数，提交数据前自动删除所有空对象、空值字段，无需逐字段校验：

// 深度清理空值、空对象工具函数
function deepCleanPayload (obj) {
  const result = Array.isArray(obj) ? [] : {}
  for (const key in obj) {
    const value = obj[key]
    // 跳过空值、空字符串
    if (value == null || value === '') continue
    if (typeof value === 'object') {
      const cleanedValue = deepCleanPayload(value)
      // 跳过清理后为空的对象/数组
      if (Object.keys(cleanedValue).length === 0) continue
      result[key] = cleanedValue
    } else {
      result[key] = value
    }
  }
  return result
}

提交接口时直接传入清理后的数据即可：

const payload = deepCleanPayload(this.person)
// 调用提交接口

如果是Vue3项目，还可以基于Proxy封装全局安全响应式代理，进一步简化绑定逻辑，原理与方案1一致。

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