Vue 数据修改出现异常，不是预想的效果

在做移动端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()k中的 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 的作用：https://segmentfault.com/a/1190000020715185
简单理解Vue中的nextTick：https://www.jianshu.com/p/a7550c0e164f

作者：doubleyong

公众号：bug收集

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

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