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 filter的几种用法示例小结

    vue filter的几种用法示例小结

    Vue.filter函数用于注册一个全局的过滤器,该过滤器可以在模板和组件中使用,这篇文章主要介绍了vue filter的几种用法示例小结,需要的朋友可以参考下
    2024-08-08
  • 详解vue挂载到dom上会发生什么

    详解vue挂载到dom上会发生什么

    这篇文章主要介绍了详解vue挂载到dom上会发生什么,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue简化用户查询/添加功能的实现

    Vue简化用户查询/添加功能的实现

    本文主要介绍了Vue简化用户查询/添加功能的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • 使用Vue实现简单日历效果

    使用Vue实现简单日历效果

    这篇文章主要为大家详细介绍了使用Vue实现简单日历效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • vue实现移动端拖动排序

    vue实现移动端拖动排序

    这篇文章主要为大家详细介绍了vue实现移动端拖动排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • vue3使用quill富文本编辑器保姆级教程(附踩坑解决)

    vue3使用quill富文本编辑器保姆级教程(附踩坑解决)

    这篇文章主要给大家介绍了关于vue3使用quill富文本编辑器保姆级教程的相关资料,在许多网站和应用程序中富文本编辑器是一种常见的工具,它使用户能够以直观的方式创建和编辑文本内容,需要的朋友可以参考下
    2023-11-11
  • Vue路由传参页面刷新后参数丢失原因和解决办法

    Vue路由传参页面刷新后参数丢失原因和解决办法

    这几天在开发中遇见的一个关于路由传参后,页面刷新数据丢失的问题,下面这篇文章主要给大家介绍了关于Vue路由传参页面刷新后参数丢失原因和解决办法,需要的朋友可以参考下
    2022-12-12
  • vue使用vuex实现首页导航切换不同路由的方法

    vue使用vuex实现首页导航切换不同路由的方法

    这篇文章主要介绍了vue使用vuex实现首页导航切换不同路由的方法 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue中scrollIntoView()方法详解与实际运用举例

    Vue中scrollIntoView()方法详解与实际运用举例

    这篇文章主要给大家介绍了关于Vue中scrollIntoView()方法详解与实际运用举例的相关资料,该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域,需要的朋友可以参考下
    2023-12-12
  • vue中的computed 和 vm.$data 原理解析

    vue中的computed 和 vm.$data 原理解析

    这篇文章主要介绍了vue中的computed 和 vm.$data 原理,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08

最新评论