vue中watch的报错处理Error in callback for watcher “playing_list“:**

本文详细介绍了在Vue中遇到的watch监听数据变化导致Echarts图表报错的问题。作者首先排除了箭头函数引起的this指向问题,并发现错误源于尝试在图表容器未创建时直接绘制图表。解决方案是确保在dialog弹框显示时才监听并根据图表容器是否存在决定是更新数据还是重新绘制。这一方法对于在弹框中使用Echarts图表的开发者具有参考价值。
摘要由CSDN通过智能技术生成

一、定位问题

一般报这个错就是提醒你watch监听中,对应的数据监听函数中出现了bug。

二、查找原因

报错信息如下:
在这里插入图片描述
1、很多资料都说是箭头函数引起的this指向问题(有需要的小伙伴可自行检查),但是这条对我无效,我并没有写箭头函数。附上我的写法如下:

watch:{
    playing_list:function(newvalue,oldvalue){
        this.drawAssess();//绘制echarts图表
    }
},

2、后来看到报错信息中drawAssess发现,我的是监听到数据变化就去刷新echarts,即重新绘制图表,但图表容器没有获取到,我直接绘制造成的。
这里提醒下,因为我的echarts图表是在dialog中的,所以还要加上,dialog显示时再去监听绘制
更改代码如下:

watch:{
    playing_list:function(newvalue,oldvalue){
        if(this.dialogVisible_assess){//图表在弹框中,需要在弹框显示时重新绘制
            if(this.myChart){//图表容器已存在
                this.setOption();//重新更新数据即可
            }else{
                this.drawAssess();//容器不存在,则需要重新绘制画图
            }
        }
    }
},
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值