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

Question

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

错误消息 1：

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

错误消息 2：

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

错误消息 1 的堆栈跟踪：

错误消息 2 的堆栈跟踪：

根据堆栈跟踪，我确定是仪表板组件中的 setListingFromCoords() 方法导致了该问题。问题也不在于 vuex 的“getListingsFromCoords”操作，因为“数据”是使用正确信息正确记录到控制台的。此外， 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 方法返回的列表数量的卡片组件。这是唯一依赖于 的组件listings，这让我相信这部分以某种方式导致 Vue 抛出错误。

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

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

Answer 1

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

编辑

这个问题是在vue-fragment v1.5.2 中引入的，将包降级到 v1.5.1。

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

Answer 2

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

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

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

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

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