Vue3使用draggable的奇怪BUG：Error: Item slot must have only one child

版本：   "vuedraggable": "^4.1.0"

首先写一下vuedraggable不同版本在vue2中和vue3中的使用区别，以供参考：

我的Vue2项目中draggble版本为：  "vuedraggable": "^2.24.1"

使用 :list 绑定参数，draggable标签内，自己可使用v-for循环来渲染对象

<draggable
    :list="bosses"
    class="list-group"
    group="people"
    @change="drag"
    :animation="300"
    >
        <div v-for="(element, index) in bosses">
            {{element.name}}
        </div>
</draggable>

我的Vue3中draggble版本为 "vuedraggable": "^4.1.0"

使用 v-model 绑定参数，draggable标签内，使用<template #item="{ element }">代表每个对象

<draggable
    v-model="bosses"
    class="list-group"
    group="bossAccount"
    :animation="300"
    @change="teamDrag"
    item-key="id"
>
    <template #item="{ element }">					
        {{element.name}}					
    </template>
</draggable>

此外，draggble需要加上item-key属性来区分每个不同的元素，如果element有id字段，一般指定为id，其他的唯一字段也可以。

 下面说说提到的bug：报错截图：

出现这个错误一般有两个原因：

1.template标签下，根元素不止一个，例如：

<draggable
    v-model="bosses"
    class="list-group"
    group="bossAccount"
    :animation="300"
    @change="teamDrag"
    item-key="id"
>
    <template #item="{ element }">	
        <div>				
            {{element.name}}	
        </div>		
        <div>				
            {{element.level}}	
        </div>			
    </template>
</draggable>

这样写就是错误的，template标签下只允许有一个根节点，可以在最外层用一个div包裹起来即可。

<draggable
    v-model="bosses"
    class="list-group"
    group="bossAccount"
    :animation="300"
    @change="teamDrag"
    item-key="id"
>
    <template #item="{ element }">	
         <div>	
             <div>				
                {{element.name}}	
            </div>		
            <div>				
                {{element.level}}	
            </div>		
         </div>		
    </template>
</draggable>

2.另外一个原因，就是本次BUG的原因，如果你在根节点前加上了注释，也会报错：

<draggable
    v-model="bosses"
    class="list-group"
    group="bossAccount"
    :animation="300"
    @change="teamDrag"
    item-key="id"
>
    <!--注释-->
    <template #item="{ element }">					
        {{element.name}}					
    </template>
</draggable>

这个BUG的产生让人感觉摸不着头脑，删掉注释就一切正常了......