vue3中vue.draggable slot(插槽) 在jsx中的使用(Error: draggable element must have an item slot)
在vue3 中 使用 vuedraggable 拖拽组件的时候 遇到的问题记录如下:
1、在template中使用拖拽插件 按照官网的写法 并没有问题 如下:
item为具名插槽
<draggable v-model="myArray" item-key="id"> <template #item="{element}"> <div> {{element.name}} </div> </template> </draggable>
2、在JSX中使用拖拽插件 遇到了一个问题 报错 Error: draggable element must have an item slot
主要是item插槽的写法需要注意 写法如下:
const slots = { item: ({element, index}) => { return <div> {{element.name}} </div> } } render(h) { return <draggable v-model="myArray" item-key="id" v-slots={ slots }></draggable> }