Vue踩坑记 — 数据修改出现异常

在做移动端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);
          }
}