Vue 3中vuedraggable无法正常运行的排查与解决求助

问题场景 #

我尝试在Vue3中使用vuedraggable，几乎完全照搬官方仓库的代码，编写了如下测试组件：

<script setup>
import { ref } from "vue"
import draggable from "vuedraggable"
const drag = ref(false)
const data = ref([
    {
        id: 1,
        name: "John"
    },
    {
        id: 2,
        name: "Joao"
    },
    {
        id: 3,
        name: "Jean"
    }
])
</script>

<template>
    <draggable 
        v-model="data" 
        group="people" 
        @start="drag=true" 
        @end="drag=false" 
        item-key="id">
        <template #item="{element}">
            <div>{{element.name}}</div>
        </template>
    </draggable>
</template>

运行后应用崩溃，出现警告：[Vue warn]: Injection "Symbol(vue:slot)" not found.，以及错误：Uncaught TypeError: Cannot read properties of null (reading 'parentNode')。

如果给组件添加header插槽：

<template>
    <draggable 
        v-model="data" 
        group="people" 
        @start="drag=true" 
        @end="drag=false" 
        item-key="id">
        <template #header>
            <div>Header</div>
        </template>
        <template #item="{element}">
            <div>{{element.name}}</div>
        </template>
    </draggable>
</template>

则会出现另一个错误：Uncaught TypeError: Cannot read properties of undefined (reading 'length')。

请问我遗漏了什么配置或步骤？

解决方法 #

这是典型的安装了错误版本的vuedraggable包导致的问题：

• 你安装的vuedraggable是适配Vue2的版本，在Vue3环境下会因为插槽机制、组件生命周期的差异引发报错。
• Vue3对应的vuedraggable包是@sortablejs/vue.draggable，而非原有的vuedraggable。

按以下步骤修复：

1. 卸载错误的包：

npm uninstall vuedraggable
# 或者用yarn
yarn remove vuedraggable

2. 安装Vue3适配版本：

npm install @sortablejs/vue.draggable --save
# 或者用yarn
yarn add @sortablejs/vue.draggable

3. 修改组件中的导入语句：

// 替换原来的导入
import draggable from '@sortablejs/vue.draggable'

4. 重新启动项目，测试组件功能即可正常运行。

另外，若仍有问题，建议检查@sortablejs/vue.draggable的版本是否在4.0.0及以上（该版本起完全适配Vue3），同时确保你的Vue3版本在3.2.0及以上。

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