CODEWITHSUNDEEP
vue.js
Evaz
Evaz

Reputation: 11

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

I am having an issue with a third party library.

I wrote a component to watch the position property and call the reload method to refresh the overlays on the map.

It performed normal when there is only one v-for.

But failed when there is two v-for.

How do I fix this?

Upvotes: 1

Views: 4530

Answers (3)

W. Nema
W. Nema

Reputation: 329

I got this error when an html element with v-if didn't have a parent container

Upvotes: 0

STh
STh

Reputation: 802

This issue does not only happen with multiple v-fors in one component; I also came across it when using multiple root elements in nuxt3. I fixed the issue by using old-style vue2 syntax: Every template contains only one child element (or v-for-directive), which contains all the content.

TL;DR: Wrapping complex contents (v-for, content of a page > 1 element, ...) in another surrounding div might solve the issue.

Upvotes: 1

Alex
Alex

Reputation: 2518

Just wrap every v-for directive in it's own, dedicated parent div.

Each v-for directive expands into multiple elements. If there are multiple lists with the same parent element which need to be updated at the same time, Vue is having a hard time updating the virtual dom.

Upvotes: 4

Related Questions