vue无法探测普通的新增对象属性与$set

vue学习, 遇到的问题集合 本文总阅读量次

vue 无法探测普通的新增对象属性

问题描述

  • 在vue中，假设a={name:"aa",age:"20"}、b={name:"bb"}如果使用this.a={...b}（此时this.a中没有age），此时再使用this.a.age="33"是失败的，因为vue无法直接探测普通的新增对象属性，age并不是响应式的property了
  • 关于vue无法直接探测普通的新增对象属性：
    • myObject为响应式对象，但使用this.myObject.newProperty = 'hi添加的newProperty是非双向绑定的，因为vue无法直接探测普通的新增对象属性，需要借助set实现双向绑定 this.$set(this.myObject, "newProperty", "hi")

解决方法

  1. 可以使用this.$set(this.a, "age", "33")向响应式对象中添加一个 propertyage，并确保这个新 property age同样是响应式的
    • vue 无法探测普通的新增 property (比如this.myObject.newProperty = 'hi/this.a.age="33")，所以必须使用$set
  2. 也可以在一开始深拷贝赋值时使用this.a={...this.a, ...b}

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
data() {
    return {
      errorDialog: {
        visible: false,
        title: '',
      },
    }
}

//...
let setDialog = { title: '' }

// 注意：深拷贝相当于切断了联系，errorDialog的visible不存在了
this.errorDialog = { ...setDialog }

// 此时this.errorDialog里没有visible，往errorDialog里直接加visible不是响应式的属性
this.errorDialog.visible = true

// 改set才能重新绑定响应式的关系
this.$set(this.errorDialog, "visible", true)
// 或把this.errorDialog = { ...setDialog }改成this.errorDialog = { ...this.errorDialog, ...setDialog }也是可行的

vue学习, 遇到的问题集合