this.$set(
this.dynamicValidateForm.domains[index], // 目标对象
item.roundProperty, // 要添加的属性名
row[item.roundProperty] ? row[item.roundProperty].split(",") : [] // 属性值
);
说明:
-
第一个参数:
this.dynamicValidateForm.domains[index]
- 这是要添加属性的目标对象,它是
domains
数组中指定索引位置的对象
- 这是要添加属性的目标对象,它是
-
第二个参数:
item.roundProperty
- 这是要添加的新属性的名称,它是动态的,来自于
item
对象的roundProperty
属性
- 这是要添加的新属性的名称,它是动态的,来自于
-
第三个参数:
row[item.roundProperty] ? row[item.roundProperty].split(",") : []
- 这是新属性的值,是一个数组
- 如果
row[item.roundProperty]
存在值,则将该值按逗号分隔转换为数组 - 如果不存在,则设置为空数组
为什么需要使用 this.$set ()
在 Vue 中,对象的响应式系统是基于 Object.defineProperty () 实现的。当一个 Vue 实例创建时,Vue 会遍历 data 选项中的所有属性,使用 Object.defineProperty () 将这些属性转换为 getter/setter。这样,当这些属性的值发生变化时,Vue 能够检测到变化并更新 DOM。
但是,如果在实例创建之后再向对象添加新属性,Vue 无法自动将这个新属性转换为响应式属性。这就是为什么需要使用this.$set()
方法的原因 —— 它是 Vue 提供的一个工具方法,专门用于向响应式对象添加新属性,确保这个新属性也是响应式的。