如何在 Vue js 3 中使用 Vue 可拖动

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>