[Vue警告]：nextTick中的错误："NotFoundError:未能在'Node‘上执行'insertBefore’
我在我的Vue web应用程序中偶尔会收到以下错误信息，但是当它发生时，它会完全停止我的应用程序。
错误消息1:
nextTick中的错误："NotFoundError:在‘node’上执行'insertBefore‘失败:要插入新节点的节点不是该节点的子节点。“
错误消息2:
DOMException:在‘node’上执行'insertBefore‘失败:要插入新节点的节点不是该节点的子节点。
错误的堆栈跟踪Msg 1:
错误的堆栈跟踪Msg 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-for‘’ed。这是唯一依赖于listings的组件，这使我相信这部分在某种程度上导致Vue抛出错误。
<card
v-for="(listing, index) in listings"
v-bind:index="index"
v-bind:key="listing._id">
</card>可以有人确认我的结论是否合理/正确。此外，如何修改代码以解决此问题，以及为什么引发此错误？。
回答 8
Stack Overflow用户
发布于 2018-08-02 12:52:12
以下内容来自VueJS核心团队成员@LinusBorg：
错误消息本身是DOM异常，Vue试图在另一个元素之前插入元素，但DOM中不再存在该元素。 结合您提供的信息，我假设Vue试图在DOM中的另一个元素之前插入一个元素，这个元素以前由v-for -换句话说，Vue试图用它认为反映列表中的更改所必需的更改来修补现有的元素列表，但是失败了， 我看不到任何直接导致这个错误的东西，我唯一的怀疑是也许你有一个复制的listing._id？
他的怀疑是正确的。我的仪表板组件中有一个重复的键，这会导致错误。
Stack Overflow用户
发布于 2020-10-08 07:25:26
我和vue-router有过类似的问题，结果我把<router-view />包装在vue-fragment里。
编辑
这个问题是在vue-片段 v1.5.2中引入的，将包降级为v1.5.1。
正如@jai所提到的，删除^ in package.json "vue-fragment": "^1.5.1"，这样npm将只安装完全相同的版本。
编辑2021年10月
如果使用的是vue-fragment Vue 3，则不再需要包，现在可以直接将多个元素添加到根元素中。
Stack Overflow用户
发布于 2020-01-16 14:15:22
我对Vue Slick滑块也有类似的问题:在我的例子中，解决方案是用一个v-if指令替换组件周围的一个v-show指令。在开始时，我还删除了生成幻灯片的循环中的:key，但最后我能够再次使用这些键。
https://stackoverflow.com/questions/51653178
复制相似问题
腾讯云开发者
