vue 报错：DOMException: Failed to execute ‘removeChild‘ on ‘Node‘

今天在项目中遇到一个报错：NotFoundError: Failed to execute 'insertBefore' on 'Node'，错误信息如下：

原因

经资料查询发现，导致上述异常是因为在html中使用了 v-if 来控制局部元素的显示与隐藏导致的。

关于 v-if 和 v-show 两个指令的区别，传送门： v-if 和 v-show 的区别

在 v-if 为false时，如果后续的 js 操作了 v-if 控制的 dom 元素，将会因为该部分dom元素不存在而抛出上述异常。

解决方法

用 v-show 来代替 v-if。（ v-show 的使用场景就是：需要非常频繁的切换元素的显示与隐藏时，使用 v-show 比较好）