vue.esm.js:3767 Error: Initialize failed: invalid dom.
时间: 2023-11-01 22:58:16 浏览: 92
***无效,思考了一下原因应该是切换页面后,本页面的dom还未渲染,但是已经调用了Echarts的函数所以才会出现这种情况。 所以我们可以在页面数据改变之后或者Dom改变之后再调用函数 callback(key) { //Tabs点击跳转事件 if (key == 2) { //确认跳转到B页面 this.$nextTick(() => { //使用this.$nexTick方法进行渲染 this.initEcharts2() //Echarts的渲染函数 }) } }
引用:├─(5) 02 Vue.js 服务器端渲染.mp4 ├─(6) 03 Nuxt 框架安装_开发_打包_环境介绍.mp4 ├─(7) 04.1 生命周期.mp4 ├─(8) 04.2 nuxtServerInit_middleware_validate.mp4 ├─(9) 04.3 asyncData_fetch_render_...
引用:在Vue脚手架 antd搭建的项目中使用Antd的Tabs标签页进行切换时,B页面的Echarts不进行渲染,而且报错提示。
根据提供的引用内容,可能出现"vue.esm.js:3767 Error: Initialize failed: invalid dom"错误的原因是在切换页面后,本页面的DOM还未渲染,但是已经调用了Echarts的函数导致。解决这个问题的方法是在页面数据改变之后或者DOM改变之后再调用Echarts的函数。例如,在Tabs的点击跳转事件中确认跳转到B页面后,可以使用this.$nextTick方法进行DOM的渲染,然后再调用Echarts的渲染函数。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)