'cytoscape: TypeError Cannot read properties of null (reading 'className')

I want to show the graph in a dialog with cytoscape, I simplify the code as following:

<template>
  <div>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="80%"
        :fullscreen="true">
      <div id="cy" class="testclass" style="width: 100%;height: 100%"/>
    </el-dialog>
  </div>
</template>

<script>
// import bus from "@/assets/bus";
import {address} from "@/util/config";
import cytoscape from "cytoscape";

export default {
  name: "GraphDialog",
  data() {
    return {
      dialogVisible: false,
      cy: {}
    }
  },

  mounted() {
    // bus.$on('showGraphDialog', (data) => {
    //   console.log(data);
    let data = {"code": "01", "name": "生态环境质量"}
    this.$axios({
      method: 'get',
      params: {
        code: data.code,
        name: data.name
      },
      url: address + '/node/detail',
    }).then(res => {
      console.log(res)
      // this.elements = res.data.data
      console.log(document.getElementById('cy'))
      this.cy = this.$cytoscape({
        container: document.getElementById('cy'),     // 定义需要渲染的容器
        layout: {name: 'cose', fit: true},  //画布自适应大小
        elements: res.data.data
      })
      this.dialogVisible = true;

    })
    // });
  }
}
</script>


<style scoped>
</style>

But the error

 cytoscape.cjs.js?44e1:26943 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'className')
    at Renderer.BRp$f.init (cytoscape.cjs.js?44e1:26943:1)
    at Renderer.BaseRenderer (cytoscape.cjs.js?44e1:26923:1)
    at new Renderer (cytoscape.cjs.js?44e1:31698:1)
    at Core.initRenderer (cytoscape.cjs.js?44e1:14453:1)
    at new Core (cytoscape.cjs.js?44e1:18641:1)
    at VueComponent.cytoscape [as $cytoscape] (cytoscape.cjs.js?44e1:31885:1)
    at eval (GraphDialog.vue?c794:136:1)

occured and I don't know why. And I alse tried the getDocumentById function doesn't work either in mounted or in the ajax of mounted. any help will be grateful.......



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source