容器组件底下无法获取dom元素

来源：18-4 echarts 自定义地图配置详解（VisualMap实战）

永远幸运

2021-02-24

老师你好，代码如下，为什么使用了容器组件以后，容器底下无法获取dom元素呢？
打印出来一直是null

<template>
  <div id="map-wrapper">
    <container :options="{ width: 1920, height: 1080, backgroundColor: '#1F4FA0' }">
      <div ref="myRef" class="map-box"></div>
    </container>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import * as ECharts from 'echarts'
// http://datav.aliyun.com/tools/atlas/#&lat=30.316551722910077&lng=106.68898666525287&zoom=3.5
import china from './data'

export default {
  setup() {
    const myRef = ref(null)
    /* eslint-disable-next-line */
    const update = () => {
      ECharts.registerMap('china', china)
      /* eslint-disable-next-line */
      const option = {

      }

      const myEchart = ECharts.init(myRef.value)
      console.log(myEchart, '0000')
      // const myEchart = ECharts.init(document.getElementsByClassName('map-box')[0])
      // myEchart.setOption(option, true)
    }

    onMounted(() => {
      console.log(myRef.value, 'myRef')

      update()
    })

    return {
      myRef
    }
  }
}
</script>

<style lang="scss" scoped>
#map-wrapper {
  .map-box {
    width: 500px;
    height: 500px;
  }
}
</style>

写回答

2回答

扬_灵

2021-02-25

同学你好，上面的代码中是可以打印dom信息的。可以把你的项目代码发一下吗，我在本地测试一下。 //img.mukewang.com/szimg/6037037f0905362e16680726.jpg

扬_灵

永远幸运

同学你好，你可以先使用settimeout获取myRef的值，onMounted(() => { console.log(myRef.value) setTimeout(() => { console.log(myRef.value) update() }, 0) }) 在获取vue的实例对象是是可以看到实例上的myRef是有值的，但是在获取时值为null,这个问题还在定位中，后续我们会持续跟进这个问题的。

2021-03-03

共2条回复

扬_灵

2021-02-24

同学你好，试一下直接打印myRef，看看有没有内容。

永远幸运

打印了，是null

2021-02-24

共1条回复

数据可视化入门到精通-打造前端差异化竞争力

同级别前端，掌握数据可视化薪资更高

1520 学习 · 1043 问题