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

本文主要是介绍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>

👇觉得有帮助的朋友可以支持下作者哦，您的鼓励是我创作的最大动力，如有开发问题可联系作者

这篇关于vue3 组合式 API 在 onMounted 中调用 dom 报错 Initialize failed: invalid dom.的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---