如何对Vue的data中定义的对象中未定义的属性进行响应式的修改
受JS的限制,Vue无法检测到属性的添加与删除。VUe实例会在初始化实例时,对属性执行getter/setter的转化过程,所以属性必须得是data对象上存在的,才可以让Vue转化它,这样才能让它是响应式的。let vm = new Vue({data:{a:1}})//vm.a是响应式的vm.b=2//vm.b则不是响应式的了上述的a属性时响应式的,所以当a属性发生变化时,会将变化的结果实时的渲
·
受JS的限制,Vue无法检测到属性的添加与删除。VUe实例会在初始化实例时,对属性执行getter/setter的转化过程,所以属性必须得是data对象上存在的,才可以让Vue转化它,这样才能让它是响应式的。
let vm = new Vue({
data:{
a:1
}
})
//vm.a是响应式的
vm.b=2
//vm.b则不是响应式的了
上述的a属性时响应式的,所以当a属性发生变化时,会将变化的结果实时的渲染到页面上。而b是vm实例创建之后添加的属性,所以它不是响应式的,所以我们在修改b的值的时候,通过DevTool看到的数据也不会发生改变
解决方法
let vm = new Vue({
el:"#app",
dara:{
obj:{
name:'aaa'
}
})
- 方法一:利用Vue.set(Object,key,value)
Vue.set(this.obj,"sex","women")
- 方法二:利用this.$set(this.object,key,value)
this.$set(this.obj,"sex","man")
Vue不允许在初始化实例之后添加属性,同时也不允许在初始化实例之后,删除属性,所以要想删除已经在data中定义好的对象中存在的属性,可以使用
this.$delete(this.obj,"name")
//这样删除属性之后,页面上的数据也会实时的进行响应
更多推荐
已为社区贡献1条内容
所有评论(0)