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