<transition-group> children must be keyed: <div>

[afuno]

Slim:

template id='blocks-template'
	draggable v-model="blocks"
		transition-group
			div v-for="block in blocks" :key="block.id"
				| {{block.id}}

HTML:

<draggable v-model="blocks">
	<transition-group>
		<div :key="block.id" v-for="block in blocks">{{block.id}}</div>
	</transition-group>
</draggable>

Without this part of the code, everything works: <transition-group>.

Once I put the code in it, I get an error:

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

I do not understand what this phrase means:

children must be keyed

What should I do with the div? I placed the div before and after thetransition-group. It did not change anything.

[David-Desmaisons]

@afuno , this message is from transition-group.
I guess the problem is that block.id value should be undefined.
Could you check that?

[David-Desmaisons]

@afuno , any feedback on this?

[afuno]

@David-Desmaisons yes. You helped. Thank you :)

[rgalaxy]

so how you fixed it? care to share it? because i encounter same problem

[StevenVerbiest]

@rgalaxy I had the same problem and it was indeed an issue with :key being undefined.

My original code was

<div v-for="(step, index) in steps.pages" :key="step.index" v-show="index === stepIndex" v-html="step.text">
</div>

But step.index was undefined. The correct key is index

<div v-for="(step, index) in steps.pages" :key="index" v-show="index === stepIndex" v-html="step.text">
</div>

Hope this helps!

[Krassmus]

I got the same error and had all elements in v-for correctly keyed. But I forgot that I had added one <li>-element that had no key - a reload-icon in my scrollable list.

    <transition-group name="blubberthreadwidget-list" tag="ol">
            <li v-for="thread in sortedThreads"
                :key="thread.thread_id"
                :data-thread_id="thread.thread_id"
                :class="(active_thread === thread.thread_id ? 'active' : '') + (thread.unseen_comments > 0 ? ' unseen' : '')"
                :data-unseen_comments="thread.unseen_comments"
                @click.prevent="changeActiveThread">
                <a :href="link(thread.thread_id)">
                    <div class="avatar"
                         :style="{ backgroundImage: 'url(' + thread.avatar + ')' }">
                    </div>
                    <div class="info">
                        <div class="name">
                            {{ thread.name }}
                        </div>
                        <studip-date-time :timestamp="thread.timestamp" :relative="true"></studip-date-time>
                    </div>
                </a>
            </li>
            <li class="more" v-if="display_more_down">
                <studip-asset-img file="ajax-indicator-black.svg" width="20"></studip-asset-img>
            </li>
    </transition-group>

The problem was the only last <li>-element. Once I rewrote it to

<li class="more" v-if="display_more_down" key="more">

Everything worked fine.

[nanslee]

so how you fixed it? care to share it? because i encounter same problem

i encounter it, too

[tinarooot]

    <transition-group tag="div" name="slide-down" class="article-box">
        <div
                class="article-item"
                v-for="item in articleList"
                v-bind:key="item._id"
                @click="$router.push(`/article/${item.id}`)">
      </div>
    </transition-group>

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

为啥？

[tinarooot]

so how you fixed it? care to share it? because i encounter same problem

i encounter it, too

怎么解决？？

[trungcva10a6tn]

    <transition-group tag="div" name="slide-down" class="article-box">
        <div
                class="article-item"
                v-for="item in articleList"
                v-bind:key="item._id"
                @click="$router.push(`/article/${item.id}`)">
      </div>
    </transition-group>

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

为啥？

because item._id = undefined

[liaowei960611]

The perfect solution to this problem is that the value of the set key is undefined, which is why this problem exists. The key that needs to be bound has a value