[Vue 警告]:nextTick 中的错误:“NotFoundError:无法在 'Node' 上执行 'insertBefore'

问题描述

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:

Error msg 2:

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:

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

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