Vue中data的userPayload对象提交时仅description有值如何解决

问题根因 #

这个问题的核心诱因通常是两个前端开发常见的逻辑陷阱：

1. console.log 延迟求值特性：你打印 this.userPayload 时，浏览器控制台存储的是对象的引用，直到你手动点开查看属性时，才会读取对象当前的最新值。如果属性赋值操作是在打印语句执行之后才完成的，你看到的打印结果就和构造新对象那一刻的实际值完全不一致。
2. 赋值逻辑不符合规则：要么你给 languageCodes、facebookUrl 这类属性赋值时放错了层级（比如赋值到了 this.userPayload.profile.xxx 而非 this.userPayload.xxx），要么 Vue2 环境下的赋值操作不符合响应式规则，导致构造对象的时间点属性还未正确更新。

解决步骤 #

• 第一步：先把整对象打印替换为单独属性打印，确认构造对象时刻的真实值，排除 console 延迟求值的干扰：

handleSaveData() {
  // 逐行打印基础类型值，不存在延迟求值问题，可以拿到构造时刻的真实数据
  console.log('description:', this.userPayload.description)
  console.log('languageCodes:', this.userPayload.languageCodes)
  console.log('facebookUrl:', this.userPayload.facebookUrl)
  console.log('youtubeUrl:', this.userPayload.youtubeUrl)

  const userPayload = {
    description: this.userPayload.description,
    profile: {
      languageCodes: this.userPayload.languageCodes,
      facebookUrl: this.userPayload.facebookUrl,
      youtubeUrl: this.userPayload.youtubeUrl
    }
  }
  console.log(userPayload)
}

• 第二步：排查所有给 userPayload 属性赋值的逻辑：
  • 确认赋值层级正确，确实是给直接挂载在 userPayload 下的属性赋值，没有写错路径
  • 如果是 Vue2 环境，数组修改不要直接用索引赋值，要用 push/splice 等数组原生方法，或者用 this.$set(this.userPayload.languageCodes, 索引, 值) 的方式修改
  • 确认赋值操作是同步执行完成之后才调用 handleSaveData，如果赋值是在异步接口回调里执行的，要等回调完成之后再触发保存逻辑
• 第三步：如果确认赋值逻辑正确，可以用解构赋值简化构造逻辑，避免手动写属性时漏写错写：

const { description, languageCodes, facebookUrl, youtubeUrl } = this.userPayload
const userPayload = {
  description,
  profile: { languageCodes, facebookUrl, youtubeUrl }
}

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