vuedraggable报错＜transition-group＞ children must be keyed: ＜div＞

今天在公司写代码的时候，遇到这么一个问题，下面来说说这个问题的原因

报错的原因是因为添加了<transition-group>标签，然后又没有对应的 :key 值，假如没有添加<transition-group>，则就不会报错

比如我的代码是这样，他不会报错，即使每一个 element 里面并没有 id 属性

<template>
    <div>
        <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
            <!-- 其实每一个 element 里面并没有 id 属性  -->
            <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
        </draggable>
    </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
    name:"dragSon",
    components: {
            draggable,
        },
    data() {
        return {
           myArray:[{name:11,type:"aa"},{name:22,type:"bb"},{name:33,type:"cc"}] 
        }
    },      
}
</script>

<style>

</style>

但是假如同样的代码，我加上 <transition-group> 标签后，如果 :key 没有对应的值，他就会报错

<template>
    <div>
        <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
            <transition-group>
                <!-- 其实每一个 element 里面并没有 id 属性  -->
                <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
            </transition-group>
        </draggable>
    </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
    name:"dragSon",
    components: {
            draggable,
        },
    data() {
        return {
           myArray:[{name:11,type:"aa"},{name:22,type:"bb"},{name:33,type:"cc"}] 
        }
    },      
}
</script>

<style>

</style>

所以解决办法是要确保有对应的 :key 值，当然，即使没有 <transition-group> 标签，我们在 v-for 循环的时候，也要确保有对应的 :key 值，并且这个 :key 值是唯一的