'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 |
|---|
