从你给出的代码和输出结果来看,这个问题可能是由于在 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
中的同名属性。
排查了一个小时,刚才终于找到导致问题的地方了(但是还是不知道为什么)
原因是我在created里用$set设置了。但是我明明根据console.log来看,created的调用是在watch这里之后的。(突然懂了!!!,log出的this.model并没有固定,getter setter的原因,我在点击(...)时,出现的是点击(...)那一时刻的值,并不是log时的值。vue3的proxy也有这个问题,log出的值只有点(...)后才会固定下来)
我以前试图解决过这个问题,找到个devtool选项让(...)的值自动显示出来,但是目前并没有这种选项。一种替代方案是用JSON.stringify(this.model)。但是要多写几个单词,有点麻烦,这次被这个问题坑了。。。
最近发现右键点在输出的对象上copy object可以起到类似JSON.stringify的作用,比一个个点(...)方便