天天看点

疑惑:[Vue warn]: Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore‘ on ‘Node‘:

问题:

[Vue warn]: Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.”

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.

疑惑:[Vue warn]: Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore‘ on ‘Node‘:

参考:

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

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

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

参考文章:https://www.jianshu.com/p/9b95705b098e

我的问题代码:

逻辑:定义isProcessUpload:false,点击按钮后,isProcessUpload=true,就报错了。

父组件:

疑惑:[Vue warn]: Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore‘ on ‘Node‘:

子组件:使用了visible属性去控制显隐

疑惑:[Vue warn]: Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore‘ on ‘Node‘:

解决:

把v-if改成:visible,没报错且正常了。

这为什么呢?

疑惑:[Vue warn]: Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore‘ on ‘Node‘:

继续阅读