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

Question

In my Nuxt app I have the following line that triggers the error mentioned in the title of this question:

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

I tried to have the :key attribute on the template element and I also tried to use just index as the key, to no avail.

Any idea?

Answer 1

There are multiple ways to solve your problem :

1. You want to iterate on a template : You have to put a key on all elements in your template because you can not put a key on 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. You can iterate on something else than a template : You just put the key on the parent html tag.

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