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

vue.js nuxt.js v-for
drake035 picture drake035 · Jun 6, 2019 · Viewed 8.3k times · Source

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

BTL picture BTL · Jun 6, 2019

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>
  1. 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>

Related questions

Nuxt.JS: How to get route url params in a page

I am using Nuxt.js, and have a dymanic page which is defined under pages/post/_slug.vue So, when I visit the page url, say, http://localhost:3000/post/hello-world, how can I read this slug parameter value inside my …

Read More
Why Prettier does not format code in VSCODE?

In my Nuxt application where ESlint and Prettier are installed and enabled, I switched to Visual Studio Code editor. When I open a .vue file and press CMD+ Shift + P and choose Format Document, my file does not get formatted …

Read More
How to get current route name in Nuxt.js?

I'm using Nuxt.js for building a static website. How to access in component's script code currently displayed route name (I would like to avoid reading direct url from browser location)? Can I somehow access $route.name ?

Read More