使用vuedraggable实现自定义组件拖拽复制功能遇报错求助

错误原因分析 #

你遇到的TypeError: Cannot read properties of undefined (reading 'header')是因为：

• comps数组中存储的是组件名称字符串（如"NavBarOne"），但draggable的item-key绑定了id，字符串类型没有id属性，导致vuedraggable内部处理slot时出现未定义错误。
• 你想实现的复制拖拽逻辑没有正确关联到vuedraggable的事件体系，当前的handleDrop方法未被触发，且配置缺少复制拖拽的关键参数。

修复步骤 #

1. 修正数据结构 #

把comps数组的元素改成带id和组件名称的对象，确保item-key有合法取值：

data() {
  return {
    comps: [
      { id: 'nav-1', name: 'NavBarOne' }
    ],
    dragOptions: {
      animation: 300,
      // 开启复制模式，拖拽时创建副本而非移动原元素
      group: {
        name: 'components',
        pull: 'clone', // 允许拖拽时克隆元素
        put: true // 允许接收克隆的元素
      }
    }
  };
}

2. 调整模板渲染 #

修改<component>的:is绑定，指向对象中的name字段：

<template>
  <div id="main" class="main w-1/4 h-full bg-gray-900">
    <draggable 
      v-model="comps" 
      v-bind="dragOptions" 
      item-key="id"
      @add="handleAdd" // 监听元素添加事件（复制拖拽时触发）
    >
      <template #item="{ element }">
        <li>
          <component :is="element.name"></component>
        </li>
      </template>
    </draggable>
  </div>
</template>

3. 替换Drop事件为vuedraggable原生事件 #

vuedraggable提供了@add事件来处理元素被添加（复制）的场景，无需手动监听原生drop事件：

methods: {
  handleAdd(evt) {
    // evt.item是克隆后的元素，自动添加到comps数组
    // 给新元素设置唯一id避免重复
    evt.item.id = `nav-${Date.now()}`;
  }
}

4. 额外注意事项 #

• 确保NavBarOne组件已正确注册（全局注册或局部导入注册）。
• 如果需要跨容器复制拖拽，保持两个draggable的group.name一致即可。

内容的提问来源于stack exchange，提问作者Abdou