欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue3使用vuedraggable插件

程序员文章站 2022-05-17 10:09:39
...

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

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

npm i -S [email protected]

然后再引入插件使用即可

<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>

Vue3使用vuedraggable插件