s***@163.com
s***@163.com
  • 发布:2021-01-16 22:36
  • 更新:2022-11-07 12:43
  • 阅读:1895

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

分类:uni-app

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

<template>
<div>
<div>{{drag?'拖拽中':'拖拽停止'}}</div>
<!--使用draggable组件-->
<draggable v-model="myArray" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @end="onEnd">
<transition-group>
<div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div>
</transition-group>
</draggable>
</div>
</template>
<style scoped>
/被拖拽对象的样式/
.item {
padding: 6px;
background-color: #fdfdfd;
border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
}
/选中样式/
.chosen {
border: solid 2px #3089dc !important;
}
</style>
<script>
//导入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;  
},  

},
};
</script>

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

  • 是东山啊

    回复 zzdev: 大佬,啥意思啊,我就是改了没什么用的

    2021-12-22 16:47

  • 齐博CMS

    感谢大神分享。有用呀

    2022-03-07 10:12

s***@163.com

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

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

一只会飞的鸟

一只会飞的鸟

解决了码

一只会飞的鸟

一只会飞的鸟

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

1***@qq.com

1***@qq.com

牛逼啊,确实可以,改完之后把插件引进components中再引入项目中就不报错了

  • Leaf27

    能麻烦问一下 具体是怎么解决这个问题的么 感谢

    2022-04-24 15:36

2***@qq.com

2***@qq.com

改完后没用怎么重新打包啊

猪肉丸

猪肉丸

看这篇文章,已完美解决,无需每次打开项目时,重新build
地址:https://ask.dcloud.net.cn/question/144791?item_id=197983
点击查看

晴天i

晴天i

App不能用吗?许多不同的错误

  • r***@163.com

    我也是,请问你解决了吗

    2023-02-09 14:20

要回复问题请先登录注册