Vue3使用vuedraggable拖拽时如何克隆对象生成新ID并保留原name

当前cloneComponent方法未接收拖拽时传入的原始元素参数，返回对象仅包含自增id字段，没有携带原元素的name等属性，导致新列表渲染时拿不到name值。

修改cloneComponent方法，接收vuedraggable自动传入的原始拖拽对象参数，合并原对象属性与新生成的自增id即可，修改后的方法代码如下：

cloneComponent(originalItem) {
  return {
    // 拷贝原元素所有属性（包含name、默认空text字段）
    ...originalItem,
    // 覆盖为新的全局自增id，保证id唯一
    id: idGlobal ++
  }
}

• vuedraggable的clone配置项接收的回调函数，在触发克隆拖拽逻辑时，会自动将当前被拖拽的源列表元素作为第一个参数传入
• 采用对象展开运算符...拷贝原属性的写法，不需要手动逐一枚举name、text等字段，后续源组件新增属性时克隆逻辑无需额外调整
• 注意新id的赋值要写在展开原属性的后面，否则会被原对象的旧id覆盖，导致id重复问题

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