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代替