Javascript [Vue warn]：下一步检查中出错：“Vue warn”；NotFoundError:无法执行'；插入前'；在'；节点'；

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

错误消息1:

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

[Vue warn]：下一步中出现错误：“NotFoundError:无法执行 “节点”上的“insertBefore”：将在其前面创建新节点的节点 插入的不是此节点的子节点。“

错误消息2:

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

DomeException:未能在“节点”上执行“insertBefore”：节点 要在其前面插入新节点的节点不是此节点的子节点 节点

错误消息1的堆栈跟踪：

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

错误消息2的堆栈跟踪：

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（）方法导致了问题。vuex“getListingsFromCoords”操作也不存在问题，因为“data”是console.log中正确记录的信息。此外，还正确填充了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);
        });
    });
},

在我的dashboard组件的模板部分中，我有一个基于上述setListingFromCoords方法返回的列表数量的v-for'ed的卡组件。这是唯一依赖于

列表的组件，这让我相信这部分内容不知何故导致Vue抛出错误

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



有人能确认我的结论是否合理/正确吗。另外，如何修改代码以解决此问题，以及为什么会抛出此错误？
以下内容来自VueJS核心团队成员@LinusBorg：

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

结合您提供的信息，我认为Vue
尝试在已删除的DOM中的另一个元素之前插入一个元素
以前由v-for创建，换句话说，Vue正在尝试
用它认为是更改的内容修补现有元素列表
必须反映列表中的更改，但失败

我看不到任何直接导致这个错误的东西，我唯一的怀疑是
可能是您有一个重复的列表。\u id

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

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

我在Vue Slick滑块上遇到了类似的问题：在我的情况下，解决方案是将组件周围的
v-if
指令替换为
v-show
指令。开始时，我还删除了生成幻灯片的循环中的
：键，但最后我可以再次使用这些键。
我在
vue路由器
上遇到了类似问题，结果我将
包装在
vue片段
内

编辑

这个问题在v1.5.2中引入，将包降级到v1.5.1

正如@jai kumaresh所提到的，删除package.json
“vue fragment”中的
^
“^1.5.1”
，因此npm将只安装完全相同的版本。
这不是最初提问者的情况，而是其他人因为这是一个常见错误而出现的情况。如果你不是连续陈述一个v-else而是两个v-ifs，也可能发生这种情况！！！1.删除package.json
中的
^
“vue片段”：“^1.5.1”，
2。然后再次运行
npmi
。只发生了
vue片段
包1.5.1以上的更新。