vue 报错解决 -------- DOMException: Failed to execute 'insertBefore' on 'Node' --------------------"NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before

问题描述:

       在使用vue的时候,我们因为改变了页面的DOM结构,可能会遇见这样的告警信息,并且页面会被卡主,需要刷新才可以解决;但是,在实际项目中,这样的情况肯定是不允许出现的。错误告警如下:

"NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before……

问题分析:

        vue框架中提供了v-if 和 v-show两个指令,用于控制页面不DOM结构的显隐性。

        相同点:均可以实现局部DOM的显示和隐藏

        不同点:显示和隐藏的原理不同。v-show隐藏元素的本质是给元素本省添加了display = none这个css属性,其实DOM结构仍存在于页面,可以通过F12查看DOM结构。v-if隐藏元素的本质是不加载DOM结构,不能通过F12查看DOM结构之后再v-if绑定的布尔变量为true时,才添加对应的DOM结构。

问题解决:

       简单来讲,使用v-show代替v-if即可。

原文地址:https://www.cnblogs.com/qlb-7/p/13650331.html