Vue.js 迭代中的自定义元素需要'；v-bind:key'；指令

在我的Nuxt应用程序中，我有以下一行代码触发此问题标题中提到的错误：

<template v-for="(project, index) in existingProjects">
    <span :key="project.projectId"></span>

我尝试在

模板

元素上使用

：key

属性，并且尝试仅使用

索引

作为键，但没有成功

---

有什么想法吗？

有多种方法可以解决您的问题：

您想在

模板上迭代

： 您必须在模板中的所有元素上放置一个键，因为您无法在

模板上放置
键
：
无法设置键。将键放在实数元素上。

---

您必须为模板中的所有元素设置关键帧。如果您拥有的不仅仅是

span

，那么这些元素还需要唯一的键。考虑将这些元素移动到一个组件中。可以使用，在DIV上循环（V-AO）而不是模板，然后输入密钥。第一个解决方案导致警告：代码>检测到重复的键：“ABC”。这可能会导致更新错误。可以添加一个后缀，如

：key=“project.projectd+'-span'

，以使每个键唯一

<template v-for="(project, index) in existingProjects">
    <span :key="project.projectId">foo</span>
    <div :key="project.projectId">bar</div>
</template>

<div v-for="(project, index) in existingProjects" :key="project.projectId">
    <span>foo</span>
    <div>bar</div>
</div>