vue echarts error: Cannot read property getAttribute of null

Posted 2021-03-07 elegant-shao

问题复现与原因解释：

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

解决：

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

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

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

 

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