在做移动端app时,修改购物车的过程中,逻辑如下:
购物车数量相减1 判断如果数量减1后,如果为0删除此条数据
01
问 题
上一条数据为0,下一条数据为1时,进行删除后,下一条数据,也变成了0 代码:
this.checkProdcutList[index].num--;
if(this.checkProdcutList[index].num==0){
this.checkProductList.splice(index,1);
}
02
原 因 异步更新队列(注意“异步”二字)
Vue中数据与视图的显示是双向的, 数据显示时,DOM 也会进行更新;
Vue在更新DOM时是异步执行的,只要侦听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更;
03
解决方案 使用$nextTick() 方法, 将删除数组的操作放在里面, 即使用$nextTick() 方法,让删除数组的操作延迟执行
即:
通过$nextTick()实现让
this.checkProdcutList[index].num-- 代码执行,且DOM更新后,再执行$nextTick()中的 this.checkProductList.splice(index,1);
代码如下:
this.checkProdcutList[index].num--;
if(this.checkProdcutList[index].num==0){
this.$nextTick(() => {
this.checkProductList.splice(index,1);
}
}