Vue3 使用 vuedraggable

前言

本文主要记录下 vuedraggable 在 vue2 和 vue3 中使用上的区别。

一、安装

vue2 安装命令

npm i vuedraggable -S

vue3 安装会报错：Cannot read property 'header' of undefined。安装最新版本的vuedraggable即可，命令行如下

npm i -S vuedraggable@next

二、使用

vue2 使用

<template>
  <draggable v-model="myArray">
    <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data () {
    return {
      myArray: [
        { id: 1, name: 'Jenny' },
        { id: 2, name: 'kevin' },
        { id: 3, name: 'lili' }
      ]
    }
  }
}
</script>

vue3 使用，报错 draggable element must have an item slot。正确写法如下

<template>
  <draggable 
    v-model="myArray" 
    group="people" 
    @start="drag=true" 
    @end="drag=false" 
    item-key="id">
    <template #item="{element}">
      <div>{{element.name}}</div>
     </template>
  </draggable>
</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: [
        { id: 1, name: 'Jenny' },
        { id: 2, name: 'kevin' },
        { id: 3, name: 'lili' }
      ]
    })
    return { ...toRefs(data) }
  }
})
</script>