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?

United

You'd have to key all elements inside the template. If you have more than just the span, those elements would also need unique keys. Consider moving those elements into a component. – Yenyenisei

May be use, looping (v-for) on a div instead of template and put keys then. – Dealing

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>

Solemnize

The first solution results in a warning Duplicate keys detected: 'ABC'. This may cause an update error. Can add a suffix like :key="project.projectId + '-span'" to make each key unique – Pepe