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

vue3 draggable拖拽组件报错Cannot read property ‘header‘和‘updated‘问题vue3draggabl 拖拽组件遇到 Cannotreadpr header 和 Cannotreadpr updated 问题今天写一个前端页面的时候需要加上拖拽功能 然后我按照网上的办法 使用 vuedraggable 组件 步骤如下 1 安装 vuedraggable S 2 vue 页面导入 vuedraggable 组件 importdragga vuedraggable 3 vuedraggable reading header

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

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

# 1. 安装vuedraggable
npm install vuedraggable -S

1

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

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

23

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

p1

# 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>
编程小号
上一篇 2025-03-03 13:46
下一篇 2025-02-27 21:30

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ji-chu/102001.html