Question

我偶尔会在Vue Web应用程序中收到以下错误消息，但是当它发生时，它会完全停止我的应用程序。

错误消息1：

[Vue警告]：nextTick中的错误：“ NotFoundError：执行失败 “节点”上的“ insertBefore”：要在其之前的新节点的节点插入的不是该节点的子节点。”

错误消息2：

DOMException：无法在“节点”上执行“ insertBefore”：节点在此之前要插入新节点的节点不是此节点的子节点节点。

错误消息1的堆栈跟踪：

错误消息2的堆栈跟踪：

基于堆栈跟踪，我查明了仪表板组件中的setListingFromCoords（）方法是造成此问题的原因。 vuex的“ getListingsFromCoords”操作也不是问题所在，因为使用正确的信息正确记录了“ data”。此外，data.results也可以正确填充。 根据堆栈跟踪的问题是this.listings = data.results。

下面是我的setListingFromCoords（）方法，该方法位于仪表板组件中：

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);
        });
    });
},

在我的仪表板组件的模板部分中，我有以下卡片组件，该组件基于上述setListingFromCoords方法返回的列表数量而被v-fored。这是唯一依赖listings的组件，这使我相信这部分正在某种程度上导致Vue引发错误。

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

有人可以确认我的结论是否合理/正确。另外，如何修改我的代码以解决此问题，为什么会引发此错误？

Answer 1

我在Vue Slick滑块上遇到了类似的问题：在我的情况下，解决方案是用v-if指令替换组件周围的v-show指令。一开始，我还删除了生成幻灯片的循环中的:key，但是最后，我又可以使用这些键了。

Answer 2

以下内容来自VueJS核心团队成员LinusBorg：

错误消息本身是Vue尝试插入的DOM异常   一个元素在另一个元素之前，但该元素不再存在   在DOM中。

结合您提供的信息，我将假设Vue   尝试在DOM中的另一个元素之前插入一个元素   之前由v-for创建的-换句话说，Vue试图   用它认为的变化修补现有元素列表   反映列表中的更改所必需，但失败

我看不到任何直接导致此错误的东西，我唯一的怀疑   可能是您有重复的清单。_id？

他的怀疑是正确的。我的仪表板组件中有一个重复的键，这会导致错误。

Answer 3

我在vue-router处遇到了类似的问题，原来我是在<router-view />内包裹vue-fragment。

Answer 4

我也有同样的问题。

参与者：我自己的个人资料表单组件+ youtube component。

<youtube
    v-if="profileData.showYoutube && profileData.youtubeUrl"
    :video-id="$youtube.getIdFromUrl(profileData.youtubeUrl)"
/>

问题：：如果用户使用加载的youtube组件查看了一些配置文件，则通过单击“创建配置文件”，vue-router将用户从site.com/some_profile_name重定向到{{1 }}。作为附加步骤，site.com/create_profile被清除（因为用户要创建新的配置文件...）。

在这种情况下，两个组件都被重用，但是由于profileData的原因，youtube成为问题的根源：profileData

解决方案：我可以通过用[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."包装youtube组件来修复它（<div>也会产生错误）：

<template>

Answer 5

从 vue-fragment 版本 1.52 降级到版本 1.51 并且不要在版本上添加 ^，现在坚持使用 1.51，因为错误在 1.52 版本上

2.如果您仍然遇到此问题尝试删除周围的片段标签

所以而不是：

<template>
   <fragment><router-view></router-view></fragment>
</template>

就放：

<template>
    <router-view></router-view> 
</template>

或者如果你可以用其他 html 标签包装这个路由器视图而不是

位于内部的组件仍然可以使用

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

5 个答案: