首页 > 其他分享 >Error in callback for immediate watcher “chartsData“: “Error: Initialize failed: invalid dom.“

Error in callback for immediate watcher “chartsData“: “Error: Initialize failed: invalid dom.“

时间:2024-04-01 10:29:39浏览次数:161  
标签:nextTick 初始化 函数 callback dom failed Error 组件 echarts

 在使用echarts提示dom未找到,原因就是当我们封装了echarts组件初始化传值时通常会造成过早调用,也就是在数据还未处理完就已经调用init函数进行初始化,此时dom还未挂载成功,就会报这个错,这里解决可以使用nextTick()函数在初始化时延时调用;

 this.$nextTick(() => {
    this.drawChart() //初始化函数
 })

        在封装中推荐大家使用监听器来实现触发更新,这样会使你的效果最佳,也最保险,不会出现dom未生成的情况,我们通常会把一些可变的值传递给子组件,比如data,在data初始化还是空的时候我们就在编译父组件时进行了传递,子组件监听初次执行,但是不显示因为是空数据,当我们函数运行完,拿到了后台数据进行再次赋值,子组件的props同时更新,被监听到后就会再次触发渲染函数,echarts图表就正常显示了。

       

  watch: {
        // 传入的动态数据
        chartsData: {
            handler(val, oldVal) {
                this.$nextTick(() => {
                    this.drawChart()
                })
            },
            deep: true, // 深度监听
            immediate: true // 初始化执行
        }
    },

标签:nextTick,初始化,函数,callback,dom,failed,Error,组件,echarts
From: https://blog.csdn.net/2301_80868127/article/details/137222893

相关文章

  • kali中解决docker报错:Error response from daemon: Get “https://registry-1.docker.
    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、问题二、解决方法1.添加DNS2.写入DNS3.重启网络服务三、测试docker是否能正常拉取镜像前言Kali在使用docker下载镜像报错,如下部分报错所示。故对docker报错进行处理方案的记录。E......
  • useMemo和useCallback
    useMemo 和 useCallback 是React的两个高级Hooks,分别用于优化渲染性能和避免不必要的重新渲染,和vue中的计算属性computed相似(缓存)1.useMemouseMemo 用于避免在每次渲染时都执行高开销的计算。它会返回一个memoized(缓存)的值,这个值仅在其依赖项发生变化时才会重新计算......
  • MySQL数据库报错:ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘
    在安装或配置MySQL数据库时,遇到错误是一个常见现象。这篇文章将详细讨论另一个常见的安装错误,包括错误的表现、产生的原因以及如何有效地解决该问题。了解这些信息可以帮助你快速定位问题所在,并采取适当的措施解决问题。错误描述一个常见的MySQL安装错误是:ERROR1045(28......
  • OOM Error
    Java内存溢出OOM文章目录Java内存溢出OOM经典错误架构StackoverFlowErrorOutOfMemoryErrorGCoverheadlimitexceededDirectbuffermemory元空间是什么经典错误JVM中常见的两个错误StackoverFlowError:栈溢出(递归调用,方法超过栈深度)OutofMemoryError:jav......
  • vuex.esm.js:135 Uncaught Error: [vuex] getters should be function but “getters.
    报错vuex.esm.js:135UncaughtError:[vuex]gettersshouldbefunctionbut"getters.mode"inmodule"userModule"is"dark".atassert(vuex.esm.js:135:1)原因:在使用vuex的moulds时index.js中已创建了一个vue实例newVuex.Store,在模块文件中又再创建了一个,导致报......
  • QT 自定义插件问题 error: LNK2001: 无法解析的外部符号
    为了重复利用已有的代码,我使用自定义插件进行开发。当每个插件独立开发时没有遇到问题,但是当插件B引用了插件A时就会在编译时报错error:LNK2001:无法解析的外部符号。例如,先定义一个插件ColorPicker,用于颜色选取。关键代码如下:classQDESIGNER_WIDGET_EXPORTColorPicker:......
  • mysql 8 报错 ERROR 1872 (HY000): Slave failed to initialize relay log info struc
    在MySQL8中遇到错误1872(HY000):Slavefailedtoinitializerelayloginfostruct的问题通常与主从复制配置有关,可能是由于配置问题或者数据不一致导致的。以下是可能的解决方法:检查主从服务器配置:确保主服务器和从服务器的配置信息正确,包括server_id的设置,主服务......
  • Uncaught (in promise) DOMException: Failed to execute 'setRequestHeader' on 'XML
    根据错误提示"Uncaught(inpromise)DOMException:Failedtoexecute'setRequestHeader'on'XMLHttpRequest':Theobject'sstatemustbeOPENED.",你遇到了一个错误,该错误表明在调用setRequestHeader方法时,XMLHttpRequest对象的状态必须是已打开(OPENED)的状态。解决此问......
  • 关于使用IconData时flutter build apk 打包报错Target aot_android_asset_bundle fail
    flutter项目中引入了iconfont.ttf之后,调试时正常,打包就报错。 网上有的说法是:使用了iconfont.ttf里面不存在的icon,但是我使用的都是在iconfont.tt文件中的icon。 我的情况是使用了switch  case给IconData的codePoint动态赋值,下面这种情况就是打包报错的 解决办法是......
  • ImportError: cannot import name ‘OrderedDict‘ from ‘typing‘
    问题描述使用timm时fromtimm.models.vision_transformerimportBlock遇到报错:"xxx/lib/python3.7/site-packages/torchvision/models/maxvit.py",line3,in<module>fromtypingimportAny,Callable,List,Optional,OrderedDict,Sequence,TupleImportE......