[Vue 警告]:nextTick 中的错误:“NotFoundError:无法在 'Node' 上执行 'insertBefore' [英] [Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node'

问题描述

I'm receiving the following error messages in my Vue web app occasionally but when it does happen, it completely halts my app.

Error msg 1:

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

Error msg 2:

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.

Stack trace for Error Msg 1:

Stack trace for Error Msg 2:

Based off the stack-trace, I've pinpointed that the setListingFromCoords() method from my dashboard component is causing the issue. The problem also isn't with the vuex "getListingsFromCoords" action since "data" is console.logged correctly with the correct information. Additionally, data.results is also being populated correctly. The problem according to the stack trace is with this.listings = data.results.

Below is my setListingFromCoords() method, which resides in the dashboard component:

setListingFromCoords() {
    return new Promise((resolve, reject) => {
        this.$store.dispatch(
            "getListingsFromCoords"
        ).then((data) => {
            console.log(data); // "data" is returned correctly here
            this.listings = data.results; // CODE BREAKS HERE
            this.previous = data.previous;
            this.hasPrevious = data.hasPrevious;
            this.next = data.next;
            this.hasNext = data.hasNext;
            resolve();
        }).catch((err) => {
            reject(err);
        });
    });
},

Within the template portion of my dashboard component, I have the following card component that is v-for'ed based on the number of listings returned by the above setListingFromCoords method. This is the only component that relies on listings, which leads me to believe that this portion is somehow causing Vue to throw the errors.

<card
    v-for="(listing, index) in listings"
    v-bind:index="index"
    v-bind:key="listing._id">
</card>

Can someone please confirm if my conclusions are in fact reasonable/correct. Also, how can I amend my code to resolve this issue and why is this error being thrown?

解决方案

The following is from VueJS core team member @LinusBorg:

The error message itself is a DOM exception where Vue tried to insert an element before another one, but that element doesn’t exist anymore in the DOM.

Combined with the information you provided I would assume that Vue tries to insert an element before another one in the DOM that was previously created by the v-for - in other words, Vue is trying to patch the existing list of elements with what it thinks are changes necessary to reflect the change in the list, and fails,

I can’t see anything directly causing this error, my only suspicion would be that maybe you have a duplicate listing._id?

His suspicions were correct. I had a duplicate key in my dashboard component, which lead to the error.

这篇关于[Vue 警告]:nextTick 中的错误:“NotFoundError:无法在 'Node' 上执行 'insertBefore'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！