Vue中 数据已改变,视图未更新的情况

使用vue的朋友们大多遇到过这样的情况:当更改了某一数据之后,console.log()该数据会显示已变化,但偏偏视图并不刷新。

原因:由于javascript的限制,Vue不能检测到以下变动的数组

1.通过索引直接设置数组的某个值,this.Arr[index] = newValue;

2.通过索引直接设置数组中对象的某个属性,this.Arr[index].pro = newValue;

3.通过修改数组的长度,this.Arr.length = newLength;

解决办法:

1.索引直接设置数组的某个值

//1.Vue.set
Vue.set(this.objArr,index,newValue)  //(数组,索引,新值)
 
//2.prototype.splice
this.objArr.splice(index,1,newValue) //(索引,长度,新值)

2.索引直接设置数组中对象的某个属性

//1.Vue.set
Vue.set(this.objArr,index,tempObj)  //(数组,索引,新值)
 
//2.prototype.splice
this.objArr.splice(index,1,tempObj) //(索引,长度,新值)

3.修改数组的长度

//1.prototype.splice
this.objArr.splice(this.objArr.length,0,new Object()) //(索引,长度,值) 
//从长度索引开始增加一个新的对象。
 

原文:https://blog.csdn.net/a646070718/article/details/80147075

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容