我偶尔会在Vue Web应用程序中收到以下错误消息，但是当它发生时，它会完全停止我的应用程序。
错误消息1:
错误消息2:
错误消息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方法返回的列表数量而被v-fored。这是唯一依赖
listings的组件，这使我相信这部分正在某种程度上导致Vue引发错误。<card
v-for="(listing, index) in listings"
v-bind:index="index"
v-bind:key="listing._id">
</card>
有人可以确认我的结论是否确实合理/正确。另外，如何修改我的代码以解决此问题，为什么会引发此错误？
最佳答案
以下来自VueJS核心团队成员@LinusBorg:
他的怀疑是正确的。我的仪表板组件中有一个重复的键，这会导致错误。