可拖动元素必须有一个项目槽

Question

我试图在我的笔记本应用程序中使用 vuedraggable，当我添加可拖动组件时出现此错误。这是代码和错误。我将不胜感激的帮助。

这是我收到的错误消息。

错误：可拖动元素必须在computeComponentStructure (webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:4483:11)处有一个项目槽(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-内部:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:965:44）在组件效果（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) 在 setupRenderEffect 处生效 (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:46:9) (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 文件传递​​。

任何帮助都会很棒。谢谢

Answer 1

只需将您的项目放在标签中<template #item>，错误就会告诉您组件内部draggeable必须始终有一个名为 的插槽item。

在 Vue 3 中，您可以使用以下方法将模板分配给槽#{slotName}

从文档中查看此演示

例子：

<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>