Vue中Echarts点击事件不能调用methods方法

最新推荐文章于 2024-05-24 11:02:18 发布

末木CT

最新推荐文章于 2024-05-24 11:02:18 发布

阅读量3.6k

点赞数 21

分类专栏： Web前端文章标签： vue echarts

本文链接：https://blog.youkuaiyun.com/Rachel_CT/article/details/109707099

版权

Web前端专栏收录该内容

12 篇文章

订阅专栏

在VUE中使用echarts，绑定了一个点击事件获取echarts中的数据，并将获取到的数据传给另一个函数（在vue的methods：{}中）进行处理。但是发现不能这样调用，代码如下，报了以下错误：

methods:{
...
drawChart(){
 myChart1.on('dblclick','series.effectScatter',function (param){
        console.log("得到的参数：", param.name)
        this.testfun(deidList);   //在这里调用测试函数
      });
},
testfun(lis){
...
}
}

后来查询发现吧监听事件中的回调改为箭头函数就行了，如下：

methods:{
...
drawChart(){
 myChart1.on('dblclick','series.effectScatter',(param)=>{   //这里改为箭头函数 
        console.log("得到的参数：", param.name)
        this.testfun(deidList);   //在这里调用测试函数
      });
},
testfun(lis){
...
}
}

原因是普通函数和箭头函数关于this指向问题，这里附上一篇参考：https://www.imooc.com/article/288214