Vuejs TransitionGroup error: children must be keyed

Viewed 33

I have a unique child Div inside a TransitionGroup element in Vue. This Div is keyed. I get this error:

runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: <TransitionGroup> children must be keyed. 

I have read other posts on the same error but the problem is usually that the immediate child isn't keyed. In this case the immediate child is keyed, and there is only one immediate child. I thought adding a key to it would be enough? I dont see what's wrong. Thanks for any hint!

<template>
    <!--begin: Vue list animation-->
    <TransitionGroup name="list" tag="div">


        <!--begin: Tag list-->
        <div class="d-flex align-items-start mb-4 mt-10" v-for="tag in sortedTagList" :key="tag.id">

            <!--begin::Tag name-->
            <div class="flex-grow-1 ">
                <span href="#" class="badge badge-light">{{ tag.tagname }}

                    <!--begin::Svg Icon (delete btn) | path: /var/www/preview.keenthemes.com/kt-products/docs/metronic/html/releases/2022-08-29-071832/core/html/src/media/icons/duotune/arrows/arr011.svg-->
                    <span class="svg-icon svg-icon-muted ms-3 svg-icon-xs custompointer mt-1"
                        @click="deleteTag(tag.id)">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                transform="rotate(-45 6 17.3137)" fill="currentColor" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)"
                                fill="currentColor" />
                        </svg>

                    </span>
                    <!--end::Svg Icon (delete btn)-->
                </span>

            </div>
            <!--end::Tag name-->

            <!--begin: User who added-->
            <div class="symbol symbol-circle symbol-25px">
                <img src="temp" alt="img">

            </div>
            <!--end: User who added-->

        </div>
        <!--end: Tag list-->

    </TransitionGroup>
    <!--end: Vue list animation-->
</template>

<script>
    export default {

    }
</script>

<style>

</style>
0 Answers
Related