Vue3使用vuedraggable插件

在vue3中使用vuedraggable会报 Cannot read property 'header' of undefined 这个错误

其实我们只要安装最新版的vuedraggable就能解决这个问题

npm i -S vuedraggable@next

然后再引入插件使用即可

<template>
  <div>
    <draggable
      v-model="myArray"
      group="people"
      @start="drag = true"
      @end="drag = false"
      item-key="id"
    >
      <template #item="{element}">
        <div>{{ element.name }}</div>
      </template>
    </draggable>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import draggable from 'vuedraggable'

export default defineComponent({
  components: { draggable },
  setup () {
    const data = reactive({
      drag: false,
      myArray: [
        { people: 'cn', id: 10, name: '小明' },
        { people: 'cn', id: 20, name: '小红' },
        { people: 'zh', id: 30, name: 'Karen' },
        { people: 'zh', id: 40, name: 'Mary' }
      ]
    })
    return { ...toRefs(data) }
  }
})
</script>