1、Error: draggable element must have an item slot
升级组件
npm i -S vuedraggable@next
使用示例
<div class="col-3">
<h3>Draggable 1</h3>
<draggable
class="list-group"
:list="list1"
group="people"
@change="log"
itemKey="name"
>
<template #item="{ element, index }">
<div>{{ element.name }} {{ index }}</div>
</template>
</draggable>
</div>
<div class="col-3">
<h3>Draggable 2</h3>
<draggable
class="list-group"
:list="list2"
group="people"
@change="log"
itemKey="name"
>
<template #item="{ element, index }">
<div class="list-group-item">{{ element.name }} {{ index }}</div>
</template>
</draggable>
</div>
const list1 = ref([
{ name: "John", id: 1 },
{ name: "Joao", id: 2 },
{ name: "Jean", id: 3 },
{ name: "Gerard", id: 4 }
])
const list2 = ref([
{ name: "Juan", id: 5 },
{ name: "Edgard", id: 6 },
{ name: "Johnson", id: 7 }
])
2、Item slot must have only one child
官方GitHub - SortableJS/vue.draggable.next: Vue 3 compatible drag-and-drop component based on Sortable.js
官方demo文章来源：https://www.toymoban.com/news/detail-604486.html
https://sortablejs.github.io/vue.draggable.next/#/two-lists文章来源地址https://www.toymoban.com/news/detail-604486.html
到了这里，关于vue2升级为vue3 vuedraggable 拖动组件报错的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
