vuedraggable事件-获取组件而不是HTML元素

<template>
  <div>
    <draggable v-model="components" @update="handleUpdate">
      <div v-for="component in components" :key="component.id">
        <my-component :data="component"></my-component>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import MyComponent from './MyComponent.vue';

export default {
  components: {
    draggable,
    MyComponent,
  },
  data() {
    return {
      components: [
        { id: 1, name: 'Component 1' },
        { id: 2, name: 'Component 2' },
        { id: 3, name: 'Component 3' },
      ],
    };
  },
  methods: {
    handleUpdate(event) {
      const draggedComponent = event.item; // 获取被拖拽的组件
      console.log(draggedComponent);
    },
  },
};
</script>