问题描述
我试图在我的 Notebook 应用程序中使用 vuedraggable,但在添加可拖动组件时出现此错误。这是代码和错误。我将不胜感激。
这是我收到的错误消息。
错误:可拖动元素必须有一个项目槽 在计算节点(webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:4483:11) 在 computeComponentStructure (webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:4525:15) 在 Proxy.render (webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:4644:32) 在 renderComponentRoot (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:965:44) 在 componentEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4382:53) 在reactiveEffect (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:71:24) 有效(webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:46:9) 在 setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4365:89) 在 mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4324:9) 在 processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4284:17)
我没有在 app.vue 上使用 vuedraggable 组件,而是将它作为组件从我的 todo.vue 文件中传递。
任何帮助都会很棒。谢谢
解决方法
只需将您的项目放在 <template #item>
标签中,错误就会告诉您,draggeable
组件内部必须始终有一个名为 item
的插槽。
在 Vue 3 中,您可以使用 #{slotName}
查看文档中的 this 演示
示例:
<draggable
:list="list"
:disabled="!enabled"
item-key="name"
class="list-group"
ghost-class="ghost"
:move="checkMove"
@start="dragging = true"
@end="dragging = false"
>
<template #item="{ element }">
<div class="list-group-item" :class="{ 'not-draggable': !enabled }">
{{ element.name }}
</div>
</template>
</draggable>