vue数据push后不能响应式更新的问题
作者:长春小霸王
这篇文章主要介绍了vue数据push后不能响应式更新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue数据push后不能响应式更新
未新属性先开辟空间
if (res.data.length > 0) { // var goodesMap = new Map() var temp_goodsList = [] var trandeProductList = res.data navItem.orderList.push({ goodsList: [] }) for (var i = 0; i < navItem.orderList.length; i++) { for (var j = 0; j < trandeProductList.length; j++) { if (navItem.orderList[i].tradeNo == trandeProductList[j].trandeForm .tradeNo) { temp_goodsList.push(trandeProductList[j]) } } navItem.orderList[i]["goodsList"] = temp_goodsList // Object.assign(navItem.orderList[i], goodesMap.get("goodsList")); // navItem.orderList[i].push(goodsList) temp_goodsList = [] // goodesMap.clear() } // var s = that.navList[0].orderList[0].goodsList.length // for (var i = 0; i < navItem.orderList.length; i++) // { // for (var j = 0; j < navItem.orderList[i].goodsList.length; j++) { // console.log(navItem.orderList[i].goodsList[j].product.name) // } // } }
vue如何更新响应式数组与对象的内容
data: { // 1.基础数据类型,字符串 :this.xxx 直接修改数据 title:"vue", // 2.数组类型 :使用7个变异函数修改 ingredients: ['meat', 'fruit', 'cookies'], // 2-2:数组内容为对象 // ①:如果是更改对象里的某一元素则 this.persons[1].xxx // ②:如果是修改整个对象内容 也是使用7个变异函数修改 persons: [ { name: 'Vane', age: 38, color: 'red' }, { name: 'Fang', age: 27, color: 'blue' }, ], // 3.对象类型 // ①:如果修改原有响应式数据,则 userInfo.xxx修改 // ②:如果是新增响应式数据,则 this.$set(this.userInfo,'xxx','x') userInfo:{ name:"wangwu", age:19 } },
1-更新基础数据类型(字符串)
this.title="vue2" 直接修改数据
2-更新数组类型
不可以使用this.xxx直接修改数据
使用7个变异函数修改 pop,push,shift,unshift,splice,sort,reverse,它们是已经在vue当中进行了二次改造
this.ingredients[1]="soup" // 失败 this.ingredients.splice(1,1,"soup") // 成功
2-2:数组内容为对象
1.修改对象中的某一属性:
this.persons[1].name="lisi"
2.用变异函数整体修改:
this.persons.splice(1,1,{name: 'zhangsan', age: 20, color: 'green'})
3.直接进行数组元素的整体替换,是不行的
this.persons[1]={ name: 'zhangsan', age: 20, color: 'green' }
3-对象类型
1.如果修改原有响应式数据,则 userInfo.xxx修改
2.如果是新增响应式数据,则 this.$set(this.userInfo,'xxx','x')。
this.$set:第一个参数就是目标对象,第二个参数是对象的属性,第三个参数是对象的属性值
注意:
- this.userInfo.sex="男" 使用this.xxx直接增加的数据,不是响应式数据,不会出现在vue调试工具里。
- 他仅仅是普通的属性节点,并不是响应式的属性节点
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。