Transition-group children must be keyed...but they are keyed

user_8266137 0
Viewed 23295

Trying to use <animation-group> in my component template, but getting error:

[Vue warn]: <transition-group> children must be keyed: <div>

But I'm pretty sure that they are keyed.

//js

Vue.component('instruments', {
template: `
        <transition-group name="fade">
            <div class="instruments">
                <div class="instrument" v-for="(instrument, index) in filteredInstruments" v-bind:key="index">
                    <img v-bind:src="instrument.photo">
                    <span class="name">{{ instrument.name }}</span>
                    <span class="construction">{{ instrument.top }} / {{ instrument.backAndSides }}</span>
                    <span class="price">$ {{ instrument.price }}</span>
                </div>
            </div>
        </transition-group>
    `
}

I think that setting v-bind:key="index" would take satisfy this, but I get the error pasted above.

vue-component vue.js
4 Answers

You have to give a unique key to your <div class="instruments"> element since elements inside a <transition-group>, specifically the immediate children, are always required to have a unique key attribute.

If you don't want to give a key to .instruments, you can remove that element and assign a tag and class attributes to <transition-group> instead since it renders an actual element which by default is a <span>.

<transition-group name="fade" tag="div" class="instruments">

In this way, the warning would not appear anymore since the immediate children (.instrument) have their unique keys assigned to them.

user_35670630

In some common cases.

You should check to see if there are any elements remain except all elements in for loop.

You may have an incorrect structure like this:

<transition-group name="fade">
  <div v-for="item in listItem" :key="item.id">
  </div>
  <n-button>Load more...</n-button>
</transition-group>

n-button is the cause. Should move n-button out side transition-group

user_39272790

just assign a key to every element inside ::
just like that :

<transition-group name="fade" tag="div" class="instruments">
   <div class="lorem" key="lorem">lorem ibsum</div>
   <div class="lorem2" key="lorem2">lorem2 ibsum</div>
   <div class="lorem3" key="lorem3">lorem3 ibsum</div>
</transition-group>
user_120265450

One or more keys is null or undefined.

For example, rendering:

const itemArray = [
    {
        id: 1,
        name: "Alisson"
    },
    {
        id: null,
        name: "Fabinho"
    },
    {
        name: "van Dijk"
    }
]

like this:

<transition-group name="fade">
  <div v-for="item in itemArray" :key="item.id">
    {{ item.name }}
  </div>
</transition-group>

will error, since there are null and undefined id's present.

user_9583980
Related