Для пользовательских элементов в итерации требуются директивы v-bind: key

Question

В моем приложении Nuxt есть следующая строка, которая вызывает ошибку, упомянутую в заголовке этого вопроса:

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

Я пытался использовать атрибут :key для элемента template, а также пытался использовать просто index в качестве ключа, но безрезультатно.

Есть идеи?

Answer 1

Есть несколько способов решить вашу проблему:

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>

2. Вы можете перебирать что-то еще, кроме template: вы просто помещаете key в родительский HTML-тег.

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