vue3 组合式 API 在 onMounted 中调用 dom 报错 Initialize failed: invalid dom.

问题

在开发的过程中,项目中需要用到 echarts,引入后在渲染的过程中报错了:Initialize failed: invalid dom.
这个报错表示元素在未渲染完成的情况下就被调用了,作者在以前也遇到过这种情况,在 vue2 中正常来说将 echarts 图表渲染操作放到 mounted 或者 $nextTick 函数中就可以了。但是在 vue3 的项目中作者已经将图标渲染的操作放入 onMounted 中执行,可是还是报这个错误

解决方法

在放入 onMounted 执行的条件下,再将图表操作放入 nextTick 函数中,代码如下:

<template><div ref="dataChart" class="data-chart"></div>
</template><script setup lang="ts">import { ref, onMounted, nextTick } from "vue";let dataChart = ref()onMounted(() => {nextTick(() => { //将图表操作放入nextTick中initChart()})})const initChart = () => { var myChart = (echarts as any).init(dataChart.value);var option = {...};myChart.setOption(option);}
</script>

👇觉得有帮助的朋友可以支持下作者哦,您的鼓励是我创作的最大动力,如有开发问题可联系作者
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/334495.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Parallel patterns: convolution —— An introduction to stencil computation

在接下来的几章中&#xff0c;我们将讨论一组重要的并行计算模式。这些模式是许多并行应用中出现的广泛并行算法的基础。我们将从卷积开始&#xff0c;这是一种流行的阵列操作&#xff0c;以各种形式用于信号处理、数字记录、图像处理、视频处理和计算机视觉。在这些应用领域&a…

C/C++学习笔记 vcpkg使用备忘及简要说明

一、简述 vcpkg 是一个免费的 C/C 包管理器&#xff0c;用于获取和管理库。从 1500 多个开源库中进行选择&#xff0c;一步下载并构建&#xff0c;或者添加您自己的私有库以简化构建过程。由 Microsoft C 团队和开源贡献者维护。 官方教程 vcpkg 文档 | Microsoft Learnvcpkg …

玩转硬件之玩改朗逸中控设备

这是一个有关一件被拆卸的朗逸中控设备的故事。这个设备已经闲置多年&#xff0c;但是它的命运发生了转变。它被改装成了一台收音机和MP3播放器。 这个设备曾经是一辆朗逸的中控屏幕&#xff0c;就是因为它没有倒车影像&#xff0c;它就被拆了下来&#xff0c;被扔在了一个角落…

Realm Management Extension领域管理扩展之安全状态

RME基于Arm TrustZone技术。TrustZone技术在Armv6中引入,提供以下两个安全状态: 安全状态(Secure state)非安全状态(Non-secure state)以下图表显示了在AArch64中的这两个安全状态以及通常在每个安全状态中找到的软件组件: 该架构将在安全状态运行的软件与在非安全状态运…

03.SpringCloud服务间远程调用

一、Feign远程调用 feign是基于nacos&#xff0c;所以需要先引入对应的依赖。 先来看我们以前利用RestTemplate发起远程调用的代码&#xff1a; 存在下面的问题&#xff1a; 代码可读性差&#xff0c;编程体验不统一 参数复杂URL难以维护 Feign是一个声明式的http客户端…

探索Java中的Map:领略键值对的无限魅力

目录 1、前言 2、介绍Map 2.1 什么是Map 2.2 Map的特点 3、常用的Map实现类 3.1 HashMap 3.2 TreeMap 3.3 LinkedHashMap 3.4 Hashtable 3.5 ConcurrentHashMap 4、操作Map的常用方法 5、Map的应用场景 5.1 缓存 5.2 数据存储 5.3 计数器 6、常见问题解答 6.1…

【漏洞复现】锐捷EG易网关cli.php后台命令执行漏洞

Nx01 产品简介 锐捷EG易网关是一款综合网关&#xff0c;由锐捷网络完全自主研发。它集成了先进的软硬件体系架构&#xff0c;配备了DPI深入分析引擎、行为分析/管理引擎&#xff0c;可以在保证网络出口高效转发的条件下&#xff0c;提供专业的流控功能、出色的URL过滤以及本地化…

极海APM32F003通过IEC 60730/60335功能安全认证,为产品安全保驾护航

近日&#xff0c;极海APM32F003系列工业级超值型MCU&#xff0c;已顺利通过IEC 60730/60335功能安全认证&#xff0c;并可提供符合CLASS B标准的功能安全设计套件&#xff0c;有助于客户减少认证时间与成本&#xff0c;快速推出稳定可靠的终端产品。 *VDE是德国的一个权威性电气…

selenium处理iframe网页办法

学习selenium中&#xff0c;发现有一些网页是嵌套的&#xff0c;即一个html嵌套另一个html&#xff0c;这被称为iframe,selenium只能查找主网页的元素&#xff0c;无法查看嵌套的&#xff0c;进入嵌套的一行代码,首先定位到iframe&#xff0c;然后browser.switch_to.frame(ifra…

如何在企业中实施自适应人工智能?

人工智能不再是企业的选择。很快&#xff0c;它也将不再是一个区分因素。商业中的适应性人工智能正在改变格局。根据最近的统计数据&#xff0c;95%的企业以上都在追求人工智能。 因此&#xff0c;为了确保你拥有竞争优势&#xff0c;你必须期待先进的人工智能选项。适应性就是…

开发分销商城小程序app,轻松助你业绩倍增

开发分销商城小程序app&#xff0c;轻松助你业绩倍增&#xff01; 1. 一键分享&#xff0c;业务拓展&#xff1a;分销商城小程序可生成独特的分销链接与二维码&#xff0c;让你的分销员分享给亲朋好友、社交媒体粉丝。迅速扩大销售网络&#xff0c;提升产品知名度。 2. 佣金管…

Python异步编程|PySimpleGUI界面读取PDF转换Excel

目录 实例要求 原始pdf文件格式 输出xls文件格式 运行界面 完整代码 代码分析 遍历表格 布局界面 控件简介 写入表格 表格排序 事件循环 异步编程 实例要求 使用PySimpleGUI做一个把单位考勤系统导出的pdf文件合并输出Excel的应用&#xff0c;故事出自&#xff1…