vue Error in nextTick错误

vue项目报错:
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."

问题描述

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

错误告警如下:

[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框架中提供了v-if 和 v-show两个指令,用于控制页面不DOM结构的显隐性。 这个问题的出现是因为使用了v-if 来切换元素导致的。我们来分析下v-if 是怎么实现的,v-if 是通过元素的删除添加来进行切换元素。然而我们的vue是通过diff算法进行元素的插入,如果没有添加key会导致元素的混乱等问题,所以我们在使用的元素上添加key即可

解决方案:

方案一:在用于v-if的元素上添加key (推荐)

方案二:在把v-if使用v-show代替

posted @ 2022-08-03 11:03  阖彩  阅读(3494)  评论(0编辑  收藏  举报