vue中this.$set修改数组,数据改变视图层不更新
向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')
·
this.$set( target, propertyName/index, value )用法:
{Object | Array} target
{string | number} propertyName/index
{any} value
(官方解释)
-
用法:
向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如this.myObject.newProperty = 'hi'
) -
总结:
1、动态修改的数据必须在data
中
2、修改某属性的值数据改变视图层也改变的条件:该属性初始化必须在该属性所在数据源中或者由this.$set
做的新增属性,后面对该属性进行操作才能监听到该属性
demo
obj:{
name:"zhangsan",
age:"15"
}
- 新增sex属性
this.obj.sex='男'
- 通过对象修改sex属性
this.obj.sex='女'
,此时数据改变,视图未更新 - 通过
this.$set
修改this.$set(obj,'sex','女')
,发现数据改变,视图未更新,与第2.出现相同的现象 - 原因:
obj
中没有sex
属性,this.$set(obj,'sex','女')
只能做修改,vue.set( )可以做县呢过,然后对obj.sex
做操作的话才能够监听到sex
,视图层才会更新
更多推荐
已为社区贡献10条内容
所有评论(0)