vue echarts error: Cannot read property getAttribute of null

问题复现与原因解释:

div标签上用了v-if:level === 2,level初始值是-1,只有在mounted中执行完某函数后给level赋值后,level的值才可能为真;而对图表的渲染就在赋值语句的下一行,echarts很可能找不到dom节点。因为在条件为假时,v-if不会渲染条件块,只有当条件为真,才开始渲染条件块。

解决:

将v-if改成v-show,因为无论条件真值如何,v-show的元素总是被渲染。

不要在条件为假的时候渲染echarts。

如果可以,考虑令条件表达式初始值为真。

v-if如果在初始渲染时条件为假,则不会渲染条件块,直到条件变为真时,才会开始渲染条件块。

原文地址:https://www.cnblogs.com/elegant-shao/p/12358388.html

时间: 2024-08-01 13:39:45

vue echarts error: Cannot read property getAttribute of null的相关文章

Error:Cannot read property 'getAttribute' of null

寻找原因: <1> 查看调用使用图表的id是否正确 <2> 不要将echarts.js文件放在<head></head> 里面,容易阻塞后面的html,放在</body>之前. <3> vue中使用:echarts.init()应该放在mounted()中,否则获取不到dom.  (我遇到的是这种) 错误详情: 页面是空白,控制台报错: 解决代码: Error:Cannot read property 'getAttribute' o

echarts js报错 Cannot read property &#39;getAttribute&#39; of null

本文将为您描述如何解决 eharts.js报错 Uncaught TypeError: Cannot read property 'getAttribute' of null 的问题 根据报错信息查找原因发现是因为 实例化 echarts 的元素不存在(未找到指定的元素),查看官方文档发现: // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); 基于准备好的 dom,初始化 e

vue2.XX 提示[Vue warn]: Error in render: &quot;TypeError: Cannot read property &#39;img&#39; of undefined&quot;

item 是向后台请求的一条数据,里面包含img,但是却提示img未定义 父组件向子组件传递数据时, 子组件 具体代码: <img :src="item.img" /> 提示: 出现的原因: 可能是页面渲染和请求数据是异步操作, 数据还未请求结束,页面已经开始渲染了,所以刚开始报未定义变量, 等数据获取结束后,再次渲染,页面内容出来了,但是刚开始的警告也出来了 解决办法: 1. <img :src="item && item.imgUrl&q

Vue(踩坑)vue.esm.js?efeb:628 [Vue warn]: Error in render: &quot;TypeError: Cannot read property &#39;0&#39; of undefined&quot; found in

1.项目报错如下 2.原因: 异步显示的数据先显示vuex中的初始数据,再显示请求的数据,一开始在vuex中state中的初始数据为空,报错是因为在显示初始数据的时候报错 3.解决:避免在没有数据的时候显示解析(有数据才解析) 有数据的时候div才存在,用v-if控制一下 5.总结:表达式有一层表达式(a),二层表达式(a.b),三层表达式(a.b.c), 当表达式三层的时候就有问题:比如a开始为空,a.b:的结果为undefined, a.b.c你再取的时候就会报错了 Vue(踩坑)vue.e

[Vue warn]: Error in render: &quot;TypeError: Cannot read property &#39;length&#39; of null&quot;

[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of null" 看到ta,总是能让人勾起心中的躁动,呼吸变得急促,嘴唇有些干涩,眼神瞬间专注,思想更是达到了忘我的境界,因为老板说,今天bug不改完就不能去吃晚饭哇! 看到这样的报错是最让人一头雾水的,渲染出错,要定位到是什么标签引起的,标签为什么引发这样的报错,错误代码定位可以用排除法,把错误的代码注释掉,如果不报错了,那就是注释的代码出了问

Error解决:Property&#39;s synthesized getter follows Cocoa naming convention for returning &#39;owned&#39;

在项目中定义了以new开头的textField,结果报错: 先看我的源码: #import <UIKit/UIKit.h> @interface ResetPasswordViewController : UIViewController @property (weak, nonatomic) IBOutlet UITextField *phoneTextField; @property (weak, nonatomic) IBOutlet UITextField *oldPasswordTe

vue Syntax Error: Unexpected token {

> [email protected] dev F:\music\music> node build/dev-server.js > Starting dev server...ERROR Failed to compile with 2 errors14:30:11 error in ./src/App.vue Syntax Error: Unexpected token { @ ./src/main.js 4:0-24@ multi ./build/dev-client ./src/

[Vue warn]: Error in render: &quot;SyntaxError: Unexpected token &#39; in JSON at position 1&quot;

一,场景: 字符串转对象: var str = "{'bankRate':5,'YINGUO':0}" 二,操作: JSON.parse(str)时候,报错 [Vue warn]: Error in render: "SyntaxError: Unexpected token ' in JSON at position 1" 三,原因: 使用parse这个方法,要求很严格,必须是json的k和value都用双引号包起来: ex:"{"bankRa

Echarts报错 Can&#39;t read property &#39;getWidth&#39; of null

统计图报错: 这里的报错与echarts无关,与zrender有关,zrender是echarts依赖的canvas绘图库 你不需要了解zrender,这个问题是你代码出了错 谨记::代码的错 Echarts报错 Can't read property 'getWidth' of null 原文地址:https://www.cnblogs.com/mangwusuozhi/p/9717410.html