this.$set
官方解释:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hello,ningzaichun’)
简单来说:当发现你给对象加了一个属性,在控制台中能打印出来,但是却没有更新到视图上时。
this.$set用法
// 数组:第一个参数是要修改的数组, 第二个值是修改的下标或字段,第三个是要修改成什么值
this.$set(sections[index].question,id,{
id:'123',
name:'李宇春',
isCheckbox:true,
answer:'测试集',
conditions:[1,2,3],
dropdownMultiSelections:[a,b,c]
});
或者
// 对象:第一个参数是要修改的对象, 第二个值是修改属性字段,第三个是要修改成什么值
Vue.set(sections[index].question,id,{ id:'123',
name:'宁在春',
isCheckbox:true,
answer:'测试集',
conditions:[1,2,3],
dropdownMultiSelections:[a,b,c]})
target: 要更改的数据源(可以是一个对象或者数组)
key 要更改的具体数据 (索引)
value 重新赋的值
this.$set 应用场景
在我们使用vue进行开发中,可能会碰到一种情况,当已经生成vue实例后,再次去给数据赋值或者添加数据,并不能同步更新到数据上面去。
另外就是像我这种,利用this.$set进行数据的更新。