vue3 draggable拖拽组件报错Cannot read property ‘header‘和‘updated‘问题

编程基础 • 2025-03-08 12:40 • 阅读 14

vue3 draggable拖拽组件遇到Cannot read property 'header’和Cannot read property 'updated’问题

今天写一个前端页面的时候需要加上拖拽功能，然后我按照网上的办法，使用vuedraggable组件，步骤如下：

# 1. 安装vuedraggable
npm install vuedraggable -S

# 2. vue页面导入vuedraggable组件
import draggable from 'vuedraggable'

# 3. 声明组件
components: {
    draggable
}

# 4. 然后就可以使用了
<draggable v-model="myArray" @start="onStart" @end="onEnd">
    <transition-group>
     <div class="item" v-for="element in myArray" :key="element.id">
     	{
  {element.name}}
     </div>
    </transition-group>
</draggable>

但是，我发现前端项目运行起来之后原先的页面都加载不出来了，然后打开控制台一看，好家伙36个错！

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'header')

error1
然后在网上查了一下，好像是版本不对，要安装最新的版本，然后我也重新安装了一下。

npm install -S vuedraggable@next

但是好像还是没有解决我的问题，又报了另一个错误。

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'updated')

error2
我怀疑是vue版本的问题，因为我现在用的是vue3.0的，然后我让我学弟试了一下在2.x的环境下会不会有问题，果然没有问题。

解决办法

参考https://github.com/anish2690/vue-draggable-next

# 1. 安装vue-draggable-next
npm install vue-draggable-next

# 2. vue页面导入vue-draggable-next组件
import { VueDraggableNext } from 'vue-draggable-next'

# 3. 声明组件
components: {
    draggable: VueDraggableNext
}

# 4. 然后就可以使用了（其实和原来的写法一模一样！！！）
<draggable v-model="myArray" @start="onStart" @end="onEnd">
    <transition-group>
     <div class="item" v-for="element in myArray" :key="element.id">
     	{
  {element.name}}
     </div>
    </transition-group>
</draggable>

vue3 draggable拖拽组件报错Cannot read property ‘header‘和‘updated‘问题

vue3 draggable拖拽组件遇到Cannot read property 'header’和Cannot read property 'updated’问题

解决办法

相关推荐