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

Question

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

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

我试图在template元素上拥有 :key 属性，我也试图只使用 index 作为键，但无济于事。

知道吗？

Answer 1

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

1. 您想迭代template：您必须在模板中的所有元素上放置一个键，因为您不能在template上放置key：<template> cannot be keyed. Place the key on real elements instead.

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

2. 您可以迭代除template以外的其他内容：您只需将key放在父 html 标签上即可。

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