DOMException: Failed to execute ‘insertBefore‘ on ‘Node‘: The node before which the new node is to b

Xxx_1206

于 2022-11-09 17:10:39 发布

阅读量4.9k

点赞数 1

分类专栏：遇到的错误文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_40806881/article/details/127773523

版权

2 篇文章

订阅专栏

本文记录了一个Vue项目中遇到的DOM操作错误，当使用v-if控制组件显示时，导致点击失效并抛出DOMException异常。解决方法是将v-if包裹在外层元素或替换为v-show。通过实例和常见解决方案，帮助开发者理解并避免此类问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一下vue项目运行中遇到的问题

情景：点击按钮打开一个打印窗口，关闭后再次点击页面任何地方都无反应，并且打印出异常日志

DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

原因：加载的组件直接使用了v-if在界面中控制显示与隐藏，比如

<Test v-if="xxx" />

解决：将该组件外面包裹一层即可：

<div v-if="xxx">
    <Text />
</div>

或者是在Text组件内部加载一层，以避免vue出错的情况。网上看到大部分的解决方法是将v-if换成了v-show，使该组件所承载的内容一直在DOM树中存在，不稳妥