迭代中的自定义元素需要'v-bind：key'指令

Question

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

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

我尝试在:key元素上具有template属性，并且还尝试仅使用index作为密钥，但无济于事。

有什么主意吗？

Answer 1

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

1. 您要迭代head： 您必须在模板中的所有元素上放一个键，因为您不能在template上放置key：template

<template> cannot be keyed. Place the key on real elements instead.

1. 除了<template v-for="(project, index) in existingProjects"> <span :key="project.projectId">foo</span> <div :key="project.projectId">bar</div> </template> 之外，您还可以迭代其他内容：您只需将template放在父html标签上即可。

key