问题:利用v-for渲染数据,通过方法改变了数据,视图没有更新。

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

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

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

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

解决重点:实现类似this.objArr[index] = newValue的效果,同时能更新视图

解决办法:

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


  
  
  1. //1.Vue.set
  2. Vue.set( this.objArr,index,newValue) //(数组,索引,值)
  3. //2.prototype.splice
  4. this.objArr.splice(index, 1,newValue) //(索引,长度,值)
  5. //3.Object.assign
  6. this.objArr[index] = newValue
  7. this.objArr = Object.assign({}, this.objArr) //存在弊端,该objArr的类型会从数组变成对象

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


  
  
  1. //1.Vue.set
  2. this.objArr[index].pro = newValue
  3. var tempObj = this.objArr[index]
  4. Vue.set( this.objArr,index,tempObj) //(数组,索引,值)
  5. //2.prototype.splice
  6. this.objArr[index].pro = newValue
  7. var tempObj = this.objArr[index]
  8. this.objArr.splice(index, 1,tempObj) //(索引,长度,值)
  9. //3.Object.assign
  10. this.objArr[index].pro = newValue
  11. this.objArr = Object.assign({}, this.objArr) //存在弊端,该objArr的类型会从数组变成对象

3.修改数组的长度


  
  
  1. //1.prototype.splice
  2. this.objArr.splice( this.objArr.length, 0, new Object()) //(索引,长度,值) 从长度索引开始增加一个新的对象。
  3. //2.Object.assign
  4. this.objArr.length = newLength
  5. this.objArr = Object.assign({}, this.objArr) //存在弊端,该objArr的类型会从数组变成对象

解决实例:

下载地址

推荐阅读:

事件捕获、事件冒泡详解

JS将数字转成货币形式的简单方法

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

Logo

前往低代码交流专区

更多推荐