vue3在mounted中获取元素null

最新推荐文章于 2025-07-30 09:32:37 发布

BraveBye

最新推荐文章于 2025-07-30 09:32:37 发布

阅读量665

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js 开发语言

本文链接：https://blog.youkuaiyun.com/qq_48217454/article/details/131598620

在Vue3的应用开发中，开发者可能遇到在mounted钩子中尝试获取元素但返回null的情况。这通常是由于组件渲染的异步性质导致的。本文将探讨这个问题的原因，并提供解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
     <div id="dynastyPie" ref="dynastyPie" class="testname">ajfldkjflk</div>
</template>
<script>
import {CanvasRenderer} from "echarts/renderers";
import * as echarts from 'echarts/core';
import { LegendComponent } from 'echarts/components';
import { ToolboxComponent } from 'echarts/components';

import axios from 'axios';
import { onMounted, ref } from 'vue';
// import { onMounted, ref } from 'vue';
export default {
    name:"dynastyPie",
       setup(){     
        let  dynastyPieOption="";
        let mydata=[];
        let dynastyPie=ref();
             console.log("dom准备好了-mount--ref");
            console.log(dynastyPie);
            console.log(dynastyPie.value);
        return{
            dynastyPieOption,
            mydata,
            dynastyPieCharts,
            dynastyPieInit,
            dynastyPie
                       
        },
        onMounted(()=>{
             let charDom=document.getElementById("dynastyPie")
            console.log("dom准备好了-mount");
            console.log(charDom);
            
        axios({
                method: 'get',
                url: 'http://localhost:8090/finddynasty',
                }).then((response)=> {
                    console.log(response.data);
                mydata=response.data;
                    console.log(mydata);
                    dynastyPieInit();
                    dynastyPieCharts()
                    
               
                }).catch(function (error) {
                    console.log(error);
                });
        });
        
 
    function dynastyPieInit(){
            dynastyPieOption = {
                legend: {
                    top: 'bottom'
                },
                toolbox: {
                    show: true,
                    feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                    }
                },
                series: [
                    {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [50, 250],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: mydata
                    }
                ]
                }
        }
        function dynastyPieCharts(){
            let charDom=document.getElementById("dynastyPie")
            console.log("dom准备好了");
            console.log(charDom);
            // let dynastyPie=ref(null);
            // let myChart=echarts.init(dynastyPie);
            let myChart=echarts.init(charDom);
            echarts.use(CanvasRenderer);
            echarts.use([LegendComponent]);
            echarts.use([ToolboxComponent]);
            myChart.setOption(dynastyPieOption);
            
        }
           }
}
</script>

缩减版

onMounted(()=>{
             let charDom=document.getElementById("dynastyPie")
            console.log("dom准备好了-mount");
            console.log(charDom);
       
        });

输出结果
在这里插入图片描述