前端 - vue2 赋值给data中一个对象，该对象部分属性始终为undefined不变？

Question

        console.log('1',_.merge({}, this.model, val))        this.model = _.merge({}, this.model, val);        console.log('2',this.model)

赋值前输出还是正常的

{"passengerName": "张三","passengerName2": "李四"}

赋值后，输出this.model，部分属性（关联el-form的属性）就变成undefined了，就像赋值后自动被改变/部分属性赋值无效

{"passengerName": undefined,"passengerName2": "李四"}

---

model是关联在el-form上的，以及有v-model双向绑定，不知道是哪个的关系

Answer 1

排查了一个小时，刚才终于找到导致问题的地方了（但是还是不知道为什么）
原因是我在created里用$set设置了。但是我明明根据console.log来看，created的调用是在watch这里之后的。（突然懂了!!!，log出的this.model并没有固定，getter setter的原因，我在点击(...)时，出现的是点击(...)那一时刻的值，并不是log时的值。vue3的proxy也有这个问题，log出的值只有点(...)后才会固定下来）

watch: {  xx:{handler(){    console.log('1',_.merge({}, this.model, val))    this.model = _.merge({}, this.model, val);    console.log('2',this.model)

created() {  this.$set(this.model, xxx, xxx);}

---

我以前试图解决过这个问题，找到个devtool选项让(...)的值自动显示出来，但是目前并没有这种选项。一种替代方案是用JSON.stringify(this.model)。但是要多写几个单词，有点麻烦，这次被这个问题坑了。。。

Answer 2

从你给出的代码和输出结果来看，这个问题可能是由于在 Vue 2 中使用 _.merge 合并对象时，有一些属性被覆盖成了 undefined。这可能是因为你传递给 _.merge 的 val 对象中含有 undefined 的值，而且这个值被用在了合并过程中。

_.merge 会直接改变第一个参数的对象，并把后面的对象中的属性合并到第一个对象中。如果后面对象的属性值是 undefined，那么它就会覆盖第一个对象中的同名属性。在你的例子中，val 对象的某些属性值可能是 undefined，所以在合并过程中就覆盖了 this.model 中的同名属性。

一个可能的解决方案是确保你在合并之前已经正确地设置了所有相关的属性值。你可以尝试在赋值之前对 val 进行检查，确保所有的属性值都是已知的。以下是一个简单的例子：

if (_.isUndefined(val.passengerName)) {  val.passengerName = '';}if (_.isUndefined(val.passengerName2)) {  val.passengerName2 = '';}// 然后再进行合并this.model = _.merge({}, this.model, val);

另外，根据你的描述，model 是与 el-form 关联并有 v-model 双向绑定的。如果你正在使用 el-form 和 v-model，那么你可能会需要使用 Vue 的特殊方法 this.$set 来设置属性值，而不是直接赋值或者使用 _.merge。这是因为 Vue 的响应式系统需要被通知当数据变更时，以便它可以更新相关的视图。使用 this.$set 可以达到这个目的：

this.$set(this.model, 'passengerName', val.passengerName || '');this.$set(this.model, 'passengerName2', val.passengerName2 || '');

这样可以确保当 val 中的属性值为 undefined 时，它们不会覆盖 this.model 中的同名属性。