vue 数据修改出现异常，不是预想的效果在做移动端app时，修改购物车的过程中，逻辑如下：购物车数量相减1判断如果数量

在做移动端app时，修改购物车的过程中，逻辑如下：购物车数量相减1 判断如果数量减1后，如果为0删除此条数据

问题：

上一条数据为0，下一条数据为1时，进行删除后，下一条数据，也变成了0

代码如下：

this.checkProdcutList[index].num--;
if(this.checkProdcutList[index].num==0){
   this.checkProductList.splice(index,1);
}

原因：

异步更新队列

Vue中数据与视图的显示是双向的, 数据显示时,DOM 也会进行更新;

Vue在更新DOM时是异步执行的，只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更;

解决方案：

使用 $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);
    }
}

参考文献：

Vue中this.$nextTick 的作用：segmentfault.com/a/119000002… 简单理解Vue中的nextTick：www.jianshu.com/p/a7550c0e1…

作者：doubleyong

公众号：bug收集

博客：bugshouji.com (专门解决与收集bug的网站)

如果喜欢这篇文章，可以支持一下哟，分享、点赞、在看走一个，哈哈@_@

'公众号'