Vue switch element error: Error in nextTick: "NotFoundError: Failed to execute'insertBefore' on'Node': The node...

created at 08-10-2021 views: 69

Problem Description

When using vue, because we have changed the DOM structure of the page, we may encounter such warning messages, and the page will be stuck and need to be refreshed to solve it; however, in actual projects, this situation is definitely not allowed appeared.

error warning

[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.

problem analysis

Two instructions, v-if and v-show, are provided in the vue framework to control the explicitness and implicitness of the page and the DOM structure. This problem occurs because of the use of v-if to switch elements. Let's analyze how v-if is implemented. v-if is to switch elements by deleting and adding elements. However, our vue uses the diff algorithm to insert elements. If the key is not added, it will cause confusion and other problems of the element, so we can add the key to the element used.

solution

Solution 1: Add key to the element used for v-if (recommended)

Solution 2: Use v-show instead of v-if

created at:08-10-2021
edited at: 08-10-2021: