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

Question

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

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

我试图拥有 :key template 上的属性element 并且我也尝试仅使用 index作为关键，无济于事。

任何的想法？

Answer 1

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

你想迭代一个 template :
您必须在模板中的所有元素上放置一个键，因为您不能放置 key在 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>

除了 template 之外，您还可以迭代其他内容。 : 你只要把key在父 html 标签上。

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