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

Question

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

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

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

有什么想法吗？

Answer 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>

你可以迭代 template 之外的东西：你只需将 key 放在父 html 标签上。

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

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

Custom elements in iteration require 'v-bind:key' directives

vue.js

v-for

nuxt.js