受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")
//这样删除属性之后,页面上的数据也会实时的进行响应
Logo

前往低代码交流专区

更多推荐