[Vuejs]-NonErrorEmittedError: component lists rendered with v-for should have explicit keys

by

0👍

✅

Each element created by a v-for directive needs to be identified by a key attribute. This attribute should use one of the variable you iterate on to be defined. Like this :

<app-Player-List v-for="(player, index) in players" :player="player" :key="'player-list-'+index" :index="index++"></app-Player-List>

This will add the key player-list-0, player-list-1, etc. to each app-Player-List created.

Also you don’t need to manually iterate over index, the v-for will do that by itself. If anything, you might have unwanted behaviour by iterating with :index="index++". So you should probably remove that. Same for :player="player", you don’t need that.

Maybe try :

<app-Player-List v-for="(player, index) in players" :key="'player-list-'+index"></app-Player-List>

Last thing, I don’t know what you are trying to do exactly, but your v-for will create an app-Player-List for each player you have in players.

Leave a comment