如何在Vue js 3中使用Vue draggabale

Question

我试图在Vue js 3中使用Draggable，但它显示了错误：VueCompilerError: v-slot can only be used on components or <template> tags.

这是我的代码

<draggable tag="transiton-group" name="slide" item-key="id" @start="drag=true" @end="drag=false" v-model="todos">
<li #item="" v-for="(todo, index) in filteredTodos" :key="todo.id" class="todo-item">
<input @click="toggleDone(todo)" class="js-tick" id="1610198328386" type="checkbox" :checked="todo.done">
<span :class="{ done: todo.done }">{{ todo.task }}</span>
<img @click="deleteTodo(index)" class="delete" width="15px" height="15px" src="~@/assets/icon-cross.svg" alt="cross">
</li>
</draggable>

此外，在我用可拖动取代mt过渡组后，它不再工作了

Answer 1

#item=""是v-slot:item=""的简写，应仅与组件标记一起使用

<draggable #item="" ...>
<li  ...
</draggable>

或模板标签：

<draggable  ...>
<template #item="">
<li ...
</template>
</draggable>