迭代中的自定义元素需要使用“v-bind:key”指令。

Question

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

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

我尝试在template元素上使用:key属性，也尝试仅使用index作为键，但都无济于事。

有什么想法吗？

- drake035

---

您需要对模板中的所有元素进行键控。如果您除了 span 之外还有其他元素，则这些元素也需要具有唯一的键。考虑将这些元素移动到组件中。 - tony19

可以在一个 div 上使用循环 (v-for) 而不是模板，然后加上键。 - Abhay Srivastav

Answer 1

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

1. 您想要迭代一个 template： 您必须在模板中的所有元素上放置一个关键字，因为您无法在 template 上放置关键字：<template> 不能被标记。请将关键字放在实际元素上。

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

2. 您可以迭代其他内容而不仅仅是template：只需在父html标记上放置key。

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

- BTL

---

第一种解决方案会导致警告：“检测到重复的键：'ABC'。这可能会导致更新错误。”可以添加后缀，例如:key="project.projectId + '-span'"，以使每个键都是唯一的。 - lsowen