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

  • Z时代
  • 2024-02-23
  • 分类：IT

        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双向绑定，不知道是哪个的关系

回答：

排查了一个小时，刚才终于找到导致问题的地方了（但是还是不知道为什么）
原因是我在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)。但是要多写几个单词，有点麻烦，这次被这个问题坑了。。。
最近发现右键点在输出的对象上copy object可以起到类似JSON.stringify的作用，比一个个点(...)方便

以上是 vue2 赋值给data中一个对象，该对象部分属性始终为undefined不变？ 的全部内容， 来源链接： utcz.com/p/934981.html

回到顶部