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之字符串、数组之间的相互转换方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • VUE前端从后台请求过来的数据进行转换数据结构操作

    VUE前端从后台请求过来的数据进行转换数据结构操作

    VUE前端从后台请求过来的数据进行转换数据结构操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • VUE-ElementUI 时间区间选择器的使用

    VUE-ElementUI 时间区间选择器的使用

    这篇文章主要介绍了VUE-ElementUI 时间区间选择器的使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 基于Vue3的打卡计时器实现方案

    基于Vue3的打卡计时器实现方案

    在日常工作和生活中,我们经常需要记录时间间隔,比如工作打卡、学习时长、项目耗时等,今天我将为大家介绍一个基于Vue3的打卡计时器实现方案,需要的朋友可以参考下
    2026-03-03
  • Vue实现父子组件通信的八种方式

    Vue实现父子组件通信的八种方式

    你是不是经常遇到这样的场景?父组件的数据要传给子组件,子组件的事件要通知父组件,兄弟组件之间要共享状态...每次写Vue组件通信都觉得头大,不知道用哪种方式最合适? 别担心!今天我就带你彻底搞懂Vue
    2025-11-11
  • Vue3如何获取proxy对象的值而不是引用的方式

    Vue3如何获取proxy对象的值而不是引用的方式

    这篇文章主要介绍了Vue3如何获取proxy对象的值而不是引用的方式,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-10-10
  • 关于VUE的编译作用域及slot作用域插槽问题

    关于VUE的编译作用域及slot作用域插槽问题

    这篇文章主要介绍了VUE 的编译作用域及slot作用域插槽问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-07-07
  • Vue通过路由实现页面间参数的传递

    Vue通过路由实现页面间参数的传递

    这篇文章主要介绍了Vue通过路由实现页面间参数的传递,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue.js diff算法原理详细解析

    vue.js diff算法原理详细解析

    这篇文章主要介绍了vue.js diff算法原理详细解析,diff算法可以看作是一种对比算法,对比的对象是新旧虚拟Dom。顾名思义,diff算法可以找到新旧虚拟Dom之间的差异,但diff算法中其实并不是只有对比虚拟Dom,还有根据对比后的结果更新真实Dom
    2022-06-06
  • vue之监听器的使用案例详解

    vue之监听器的使用案例详解

    这篇文章主要介绍了vue之监听器的使用案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09

最新评论