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

Question

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

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

我试图:key在template元素上拥有该属性，我也尝试将其index用作键，但无济于事。

任何的想法？

Answer 1

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

1. 您想迭代 a template：您必须在模板中的所有元素上放置一个键，因为您不能在 akey上放置 a template：<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. 您可以迭代除 a 之外的其他内容template：您只需将key放在父 html 标签上。

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