vue3 draggable拖拽组件报错Cannot read property ‘header‘和‘updated‘问题
vue3 draggable拖拽组件遇到Cannot read property 'header’和Cannot read property 'updated’问题今天写一个前端页面的时候需要加上拖拽功能,然后我按照网上的办法,使用vuedraggable组件,步骤如下:# 1. 安装vuedraggablenpm install vuedraggable -S# 2. vue页面导入vuedra
·
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')
然后在网上查了一下,好像是版本不对,要安装最新的版本,然后我也重新安装了一下。
npm install -S vuedraggable@next
但是好像还是没有解决我的问题,又报了另一个错误。
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'updated')
我怀疑是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>
更多推荐
已为社区贡献4条内容
所有评论(0)