vue报错Cannot read properties of undefined (...)类型的解决办法

 更新时间:2024年04月11日 09:47:33   作者:啵啵啵啵猫  
这篇文章主要给大家介绍了关于vue报错Cannot read properties of undefined (...)类型的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下

场景:

在项目中,想要获取鼠标的元素,红色区域报错:Cannot read properties of undefined (reading 'grid3D')

分析:

Cannot read properties of undefined类型的报错,一般是报错元素的前一个元素出了问题,也就是this.option没有获取到。

报错类型一般为两种:

  • 对象没值的时候
  • 对象为undefined的时候

对象没有数据的时候为undefined 这个时候访问内部内容就会报错

解决方法:

查看一下this.option,注释掉问题代码,并输入console.log(this.option)

let option = xxx;
this.rateChart.on("mouseover", (params) => {
        // console.log('params',params);
        if (params.target) {
          // console.log("非空白区");
        } else {
        //  console.log("空白区");
          console.log(this.option) 
          // this.option.grid3D.viewControl.alpha =20; // 视角绕 x 轴,即上下旋转的角度
          // this.option.grid3D.viewControl.beta = 70; // 视角绕 y 轴,即左右旋转的角度。
          // this.rateChart.setOption(this.option);
        }
}); 

发现输出undefined,说明没有找到option,查看上下文,发现前面已经定义了option,不需要用this,直接使用即可。

修改后:

成功解决。

总结

到此这篇关于vue报错Cannot read properties of undefined (...)类型解决办法的文章就介绍到这了,更多相关Cannot read properties of undefined内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue实现百度搜索功能

    vue实现百度搜索功能

    这篇文章主要为大家详细介绍了vue实现百度搜索功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue中实现页面刷新以及局部刷新的方法

    vue中实现页面刷新以及局部刷新的方法

    这篇文章主要给大家介绍了关于vue中实现页面刷新以及局部刷新的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • Vue网络请求的三种实现方式介绍

    Vue网络请求的三种实现方式介绍

    这篇文章主要介绍了Vue网络请求的三种实现方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-09-09
  • vue全局自定义指令和局部自定义指令的使用

    vue全局自定义指令和局部自定义指令的使用

    这篇文章主要介绍了vue全局自定义指令和局部自定义指令的使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • vue watch关于对象内的属性监听

    vue watch关于对象内的属性监听

    这篇文章主要介绍了vue watch关于对象内的属性监听的相关知识,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-04-04
  • Vue中computed及watch区别实例解析

    Vue中computed及watch区别实例解析

    这篇文章主要介绍了Vue中computed及watch区别实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • Vue传参一箩筐(页面、组件)

    Vue传参一箩筐(页面、组件)

    这篇文章主要介绍了Vue传参一箩筐(页面、组件),Vue页面、组件之间传参方式繁多,此处罗列出常用的几种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 解决vue创建项目使用vue-router和vuex报错Object(...)is not a function

    解决vue创建项目使用vue-router和vuex报错Object(...)is not a&nb

    这篇文章主要介绍了解决vue创建项目使用vue-router和vuex报错Object(...)is not a function问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • Vue中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发)

    Vue中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发)

    这篇文章主要介绍了Vue中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue中关于router.beforeEach()的用法

    vue中关于router.beforeEach()的用法

    这篇文章主要介绍了vue中关于router.beforeEach()的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11

最新评论