MENU

使用Echarts报错

November 19, 2021 • Read: 495 • 杂谈阅读设置

<template>
<div ref="wordcloudchart"style="width:400px;height:400px"></div>
</template>
<script>
export default{
    data(){
        <!--
        ...
         -->
    },
    mounted(){
        this.initWordCloudChart();
    },
    methods:{
        initWordCloudChart(){
            let wordcloud=this.$echarts.init(this.$refs.wordcloudchart);
            //console.log(wordcloud);
            <!--
            ...
           
        }
    }    
}
</script>

当前代码即完成在页面上实现词云图的功能,一切正常。但往<template>中增加了上百行代码后,wordcloudundefined,即获取不到DOM。尝试网上的什么异步方法,jq......均不行。更改mountedupdated生效。

由于DOM中的某个DOM采用了v-ifv-show 或者 v-for(即根据获取到的后台数据来动态操作 DOM,即响应式),则DOM无法在mounted阶段获取到。mounted为加载阶段,而updated阶段则是完成了数据更新到DOM的阶段,使用this.$refs.wordcloudchart就能找到DOM

参考链接:

https://www.cnblogs.com/menxiaojin/p/14236647.html