vue报错解决-"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结构的显隐性。

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

问题解决:

简单来讲,使用v-show代替v-if即可。经验证,添加结构不会再出现该报错,如图:


效果图

备注:

因实际开发中,遇见了该问题,参考博友琥珀光洁-衍钧的博客解决,本人结合自己的理解重新整理一下。
博客链接:https://blog.csdn.net/changhuzhao/article/details/78739857

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,968评论 1 45
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 13,260评论 1 52
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 12,007评论 0 25
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 8,113评论 1 4
  • Vue是一个前端js框架,由尤雨溪开发,是个人项目 Vue近几年来特别的受关注,三年前的时候angularJS霸占...
    6e5e50574d74阅读 3,526评论 0 0