当前位置: 首页 > article >正文

开发需求总结17-vue echart报错:Cannot read property get ‘Attribute‘ of undefined

看到这个报错,强迫症患者贼难受。。。页面明明没有任何问题,但就是一直在切换echart图表显示的时候,总是出现这个报错。百度查了半天,终于定位到原因了,解决方法记录一下。

在解决问题的过程中,使用了以下方法

报错代码:

mounted() {
// ...
this.getChgWeeklyEcharts() // getChgWeeklyEcharts方法为自己定义的包含渲染 echarts 图表的方法
// ...
}
以前用 echarts 没有出现过这个问题,所以当这个问题出现时,试了几种方法依旧报错,比如:

1、在mounted() {},使用

nextTick(() => {
this.drawCharts()
});
2、使用 setTimeout 包裹: (依旧报错)
setTimeout(() => {
this.drawCharts()
}, 1000);


解决方法

在echarts标签的最外层加了v-if,所以导致了报错,只要把v-if改成v-show就可以了~


报错分析

报错地点: 在放 echarts 图表的 div 使用了 v-if 指令,在绑定的值为 false 时会报此错,而值为 true 时候不会报错。

原因分析:
我们都知道,在切换显示与隐藏很少的情况下,使用 v-if 会性能更好,所以我根据实际情况首先选择了 v-if 指令。但是因为隐藏的时候, v-if 会使整个 dom 节点不渲染,而 v-show 只是给 dom 节点加了 display: none;属性,节点依然存在 。所以在这种特殊的情况下,由于 v-if 值为 false 时候mounted 中画图的方法依然会执行,在获取 dom 节点时获取不到,所以就会导致报错。


http://www.kler.cn/a/396410.html

相关文章:

  • 【2025最新计算机毕业设计】基于SpringBoot+Vue电脑在线装机指南教程网站【源码+文档】
  • 【Pikachu】任意文件上传实战
  • 【C++】深入理解自定义 list 容器中的 list_iterator:迭代器实现详解
  • 【Java Web】Ajax 介绍及 jQuery 实现
  • Go 语言中,golang结合 PostgreSQL 、MySQL驱动 开启数据库事务
  • Python入门(4)--流程控制(下)
  • 基于PHP技术的校园站的设计与实现
  • ​‌华为交换机在Spine-Leaf架构中的使用场景​
  • 我谈二值形态学基本运算——腐蚀、膨胀、开运算、闭运算
  • java xml 文本解析
  • git如何开启SSH?
  • vcenter service基本异常处理
  • rom定制系列------红米10x 5G版本安卓12-miui14批量线刷固件
  • 鸿蒙实战:页面跳转
  • FromData格式提交接口时入参被转成JSON格式问题
  • 前端(3)——快速入门JaveScript
  • uni-app移动端与PC端兼容预览PDF文件
  • Rust 语言学习笔记(四)
  • Qt中实现旋转动画效果
  • Electron 项目启动外部可执行文件的几种方式
  • 网络安全之WINDOWS端口及病毒编写
  • 发国外SCI/SSCI/AHCI,文章被WOS数据库漏检,应该如何催检索?附催检索(信)邮件模板!
  • CAP与BASE分布式理论
  • 利用redis的key失效监听器KeyExpirationEventMessageListener作任务定时提醒功能
  • DLMM(数字化转型成熟度模型认证)是什么?
  • 苍穹外卖学习-day11