s***@163.com
s***@163.com
  • 发布:2021-01-16 22:36
  • 更新:2021-07-07 15:05
  • 阅读:588

使用vuedraggable时,监听end事件时发生错误,提示Error in v-on handler: "TypeError: Cannot read property 'id' of null"

分类:uni-app

页面代码如下,错误提示见附件,请大佬帮忙看看

{{drag?'拖拽中':'拖拽停止'}}
{{element.name}}
/*被拖拽对象的样式*/ .item { padding: 6px; background-color: #fdfdfd; border: solid 1px #eee; margin-bottom: 10px; cursor: move; } /*选中样式*/ .chosen { border: solid 2px #3089dc !important; } //导入draggable组件 import draggable from 'vuedraggable' export default { //注册draggable组件 components: { draggable, }, data() { return { drag:false, //定义要被拖拽对象的数组 myArray:[ {people:'cn',id:1,name:'www.itxst.com'}, {people:'cn',id:2,name:'www.baidu.com'}, {people:'cn',id:3,name:'www.taobao.com'}, {people:'us',id:4,name:'www.google.com'} ] }; }, methods: { //开始拖拽事件 onStart(){ this.drag=true; }, //拖拽结束事件 onEnd() { this.drag=false; }, }, };
2021-01-16 22:36 负责人:无 分享
已邀请:
j***@qq.com

j***@qq.com

解决方案来了

修改CustomEvent数据类型就可以绕过uni-app注入的原始事件检查了
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}));  
}
  • 8***@qq.com

    改了,好像没有用

    2021-06-02 12:07

  • j***@qq.com

    回复 8***@qq.com: 引用对了吗,自定义的话vuedraggable就不要用node_moudles里面的

    2021-06-04 19:25

  • zzdev

    牛批啊,改完没有用的话记得重新build一下这个库

    2021-08-05 12:29

s***@163.com

s***@163.com (作者)

同样的代码在VUE下使用是正常的,但在uni-app下就会出现上述的错误

一只会飞的鸟

一只会飞的鸟

解决了码

一只会飞的鸟

一只会飞的鸟

拖动修改之后,还是报错,貌似不太管用呢

要回复问题请先登录注册