uni-app项目中使用VueDraggable的add事件报错

uni-app项目中使用VueDraggable的add事件报错

使用vue cli 安装的项目中使用 VueDraggable的add事件能够正常使用不报错，但是用uni-app创建的项目npm安装VueDraggable之后使用add事件就会报错

找了一下相关的帖子，只有这个：https://ask.dcloud.net.cn/question/115601

说的是修改CustomEvent数据类型就可以
将vuedraggable.js #30

function emit(evtName, evtData) {    
  this.$nextTick(() => this.$emit(evtName.toLowerCase(), evtData));    
}

修改为

function emit(evtName, evtData) {
this.$nextTick(() => this.$emit(evtName.toLowerCase(), {...evtData}));
}

就好了，但是更改了之后并没有效果，依然报错


![Image from CDN](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211223/b83a942d02a2aaeb521f15d15515bfe1.png)

![Image from CDN](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211223/714f742dd8a3c51fc695449582cec7fd.png)

更多关于uni-app项目中使用VueDraggable的add事件报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

原来大佬已经解决了 https://ask.dcloud.net.cn/article/39267?notification_id-1010893
感谢大佬

更多关于uni-app项目中使用VueDraggable的add事件报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我改完之后报Cannot read property ‘nid’ of undefined at view.umd.min.js:1，你有遇到吗

回复 s***@qiyedaohr.com: 我也是，请问该怎么解决

大佬 为什么我使用npm安装了vuedraggable之后import进去会报 [“usingComponents”][“draggable”] 我是在分包中使用的，vuedraggable在主包的node_modules

H5就可以正常使用 编译成小程序就会找不到这个组件

回复 wohuo: 大佬解决了这个问题吗

看这篇文章，已完美解决vuedraggable的拖拽排序报错问题，无需每次打开项目时，重新build 地址：https://ask.dcloud.net.cn/question/144791?item_id=197983 点击查看

在uni-app中使用VueDraggable的add事件报错，主要是由于uni-app环境与标准Vue环境存在差异。你提到的修改方案确实在一些情况下有效，但可能不适用于你的具体场景。

从你提供的错误信息来看，问题出现在CustomEvent类型上。uni-app的运行时环境与标准浏览器环境不同，对事件对象的处理方式存在差异。

更可靠的解决方案是：

  1. 在组件中直接处理事件时，使用$event参数：
<draggable @add="handleAdd($event)">
  1. 在处理方法中明确处理事件数据：
handleAdd(evt) {
  // 避免直接使用evt对象，提取需要的数据
  const draggedElement = evt.item
  const newIndex = evt.newIndex
  // ... 其他处理逻辑
}
回到顶部