2022-05-16 Error in mounted hook: "Error: Initialize failed: invalid dom."
前言,项目中要用到echarts,需要获取到dom进行初始化,在获取dom这一步卡住了。
注:本项目大体框架用的是uniapp+vue,一个小程序项目。
vue版本:2.9.6 @vue/cli 4.5.12 npm版本:6.10.3 node版本:v12.10.0
举例:
<template> <div ref="box"></div> </template> <script> export default { mounted() { console.log(this.$refs.box); // undefined } } </script> <style scoped> </style>
有网友建议放在this.$nextTick(() => {})里面打印
<script> export default { mounted() { this.$nextTick(() => { console.log(this.$refs.box); // undefined }); } } </script>
或者用定时器去延时打印
<script> export default { mounted() { setTimeout(()=>{ console.log(this.$refs.box); // undefined },5000) } } </script>
均为undefined。
而且,我在非uniapp项目(vue搭建)中运行了该代码,是能够获取到的。
解决方案:使用uniapp的api来获取dom元素。
具体可看这里:https://www.gxlsystem.com/qianduan-4051.html
2022-10-27 在小程序中uniapp的ref只能用来获取子组件,且该子组件必须被引用。