vue改变对象的属性值,视图未更新

探讨Vue中对象属性及数组变化的响应性问题,解释为何动态添加的属性不触发视图更新,以及如何通过Vue.set或$set方法解决。

我建立了一个对象,视图中遍历这个对象,并显示这个值,然后有个按钮,可以改变obj对象的值

<li v-for="(items,index) in obj" :key="index" >{{items}}</li>
<button @click="btn">添加obj.b</button>

<script>
	export default:{
	data(){
		return:{
			obj:{
				'a':'aaa'
			}
		}
	},
	methods:{
		btn(){
			this.obj.b = 'bbb'
			console.log('obj的属性会改变,但是视图不会更新')
		}
	}
}

//原因在于在Vue实例创建时, obj.b 并未声明,因此就没有被Vue转换为响应式的属性,
自然就不会触发视图的更新,由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,
所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。这时就需要使用Vue的全局api—— set():或者我们在vue实例创建前给obj定义一个obj.b属性,这样就会被vue加入响应中或者可以使用vue.set():或者我们在vue实例 创建前给obj定义一个obj.b属性,这样就会被vue加入响应中 或者可以使用vue.set()vueobjobj.b,vue使vue.set()方法,给对象设置属性,会自动加入相应中
//Vue,$set方法(向对象添加一个属性)
在btn(){

		this.$set(this.obj,'a','bbb')  //set语法  target响应的对象    key:对象需要监控的键的名称  value 属性值,
	}

//由于js的限制,vue不能检测以下数组的变化:
1.当你利用索引直接设置一个数组项时,vm.items[index] = newValue
2.当你修改数组的长度时,vm.items.length = newLength
data:{
items:[‘a’,‘b’,‘c’]
}
vm.items[1] = ‘x’ //不是响应的
vm.items.length = 2 //不是响应的

//解决响应
Vue.set(vm.items,index,newValue)
vm.$set(vm.items,index,newValue)
//主要是用来解决vue无法检测到对象中新增的property
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值