有一个项目,做的功能是扫描条码,然后商品的数量加一。
但是,因为修改的是数组中某一项的某个属性,但是页面渲染的是数组,这是引用数据类型,更改其中的一个属性并不会触发变更检测。
下面上一下代码,讲解一下
具体的业务流程就是扫描条码,先确认条码是否为空,然后判断接口里面的数据是否有扫描的条码,最后,把扫描数量加一
// 货品条码扫描回车事件
scanCodeHandle() {
var hasCode = false; // 定义变量,确定扫描的条码订单内是否拥有
if (this.scanCode == '') {
return uni.showToast({
title: '条码不能为空'
})
}
for (var i = 0; i < this.instockList.length; i++) {
// 用输入的条码和接口返回的条码比较
if (this.scanCode == this.instockList[i].BarCode) {
this.instockList[i].scanNum +=1
hasCode = true;
}
}
this.instockList = this.instockList.slice()
if(!hasCode){
uni.showToast({
title:'无此条码'
})
}
}
这句代码this.instockList[i].scanNum +=1
扫描对应的条码数量加一,没有即时渲染到视图里面,最后加上this.instockList = this.instockList.slice()
这句代码才可以。
因为页面渲染的是this.instrockList
,这是引用数据类型,更改其中的一个属性并不会触发变更检测。this.instrockList.slice()
是重新生成了一个数组,这样的话就是重新生成了数组,页面也就重新渲染了。