vue数组对象修改时无法响应的替换方法

vue中使用下标修改数组数据,如this.list[0]="asd或者修改数组长度,如this.list.length=3,都不会响应式的修改dom元素,但是没响应并不是没有改变数据,改变了数据只是vue无法响应此修改方式。

可以下载一个 Vue-Devtools 可以很清楚的看见数据变化,一位博友很贴心的铺好了路,不用弄node乱七八糟的,下载添加就可以,地址:伸手党的福利,也可以在控制台打开sources打个断点查看数据变化,不会的话可以看这里

替换的方法:

			const first=new Vue({
				el:"#app",
				data:{
					list:[1,"Asxx",3,4,5,6,7,8,9]
				},
				methods:{
					ary:function(){
						Vue.set(this.list,1,"oooooo");//改变数据
						//this.list.splice(1,1,"oooooo");另一个改变数据方法
						//this.list.splice(5);改变数组长度
					}
				}
			});
			//first.$set(first.list,1,"xxxxx");在全局中改变数组数据
			//first.list.splice(3);在全局中改变数组长度

在vue中对象添加或删除如使用平常方法也无法响应

const first=new Vue({
				el:"#app",
				data:{
					obj:{a:"yi",b:"er",c:"san"}
				},
				methods:{
					shuzu:function(){
						//this.obj.d="xzc";无法响应此添加方法
						//delete this.obj.a;无法响应此删除方法
						可响应的添加:
						//Vue.set(this.obj,"d","si");添加单个属性
						/*this.obj=Object.assign({},this.obj,{ 添加多个属性
							s:"yi",
							v:"xxx"
						})*/
						可响应的删除:
						//Vue.delete(this.obj,"a");
						//this.$delete(this.obj,"a");
					}
				}
			});
			//first.$set(first.obj,"d","si");全局中增加单个对象属性
			first.obj=Object.assign({},first.obj,{//全局中增加多个
				s:"yi",
				v:"xxx"
			})
			//first.$delete(first.obj,"a");全局中删除方法
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值