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

Posted 2023-02-23

【中文标题】可拖动元素必须有一个项目槽

【英文标题】：draggable element must have an item slot

【发布时间】：2021-09-03 11:31:44

【问题描述】：

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

这是我收到的错误消息。

错误： 在 computeNodes (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 文件中的组件传递。

任何帮助都会很棒。谢谢

【参考方案1】：

只需将您的项目放在<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>

【讨论】：

非常感谢它解决了这个问题。欣赏你

很高兴它成功了。考虑将我的答案选为已接受