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

Question

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

错误消息 1：

[Vue warn]: nextTick 中的错误：“NotFoundError：无法在‘Node’上执行‘insertBefore’：要插入新节点的节点不是该节点的子节点。”

错误消息 2：

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

错误消息 1 的堆栈跟踪：

错误消息 2 的堆栈跟踪：

根据堆栈跟踪，我已经确定是我的仪表板组件中的 setListingFromCoords() 方法导致了这个问题。问题也不在于 vuex “getListingsFromCoords” 操作，因为“数据”是 console.logged 正确的信息。此外，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 转换的。这是唯一依赖于 listings 的组件，这让我相信这部分以某种方式导致 Vue 抛出错误。

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

有人可以确认我的结论实际上是否合理/正确吗？另外，我该如何修改我的代码来解决这个问题，为什么会抛出这个错误？

原文由 p4t 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

结合您提供的信息，我假设 Vue 尝试在之前由 v-for 创建的 DOM 中的另一个元素之前插入一个元素 - 换句话说，Vue 正在尝试用它认为的方式修补现有的元素列表是否需要更改以反映列表中的更改，但失败了，

我看不到任何直接导致此错误的原因，我唯一的怀疑是您可能有重复的列表。_id？

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

原文由 p4t 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我有一个类似的问题 vue-router 结果我包装了 <router-view /> 里面 vue-fragment 。

编辑

此问题在 vue-fragment v1.5.2 引入，将软件包降级到 v1.5.1。

正如@jai-kumaresh 提到的那样，在 package.json 中删除 ^ "vue-fragment": "^1.5.1" 这样 npm 将只安装完全相同的版本。

编辑 2021 年 10 月

vue-fragment 如果您使用的是 Vue 3 ，则不再需要包，现在您可以将多个元素直接添加到根元素。

原文由 Ammar Oker 发布，翻译遵循 CC BY-SA 4.0 许可协议