我正在尝试在 vue.js 框架中使用 cytoscape.js。我做了一个简单的模板，还有一个变量cy在 data部分。在mounted()我调用的钩子(Hook)函数cytoscape .只要我存储 cytoscape 的结果，一切正常在本地变量中，您可以在 mounted() 中看到以下内容功能 let cy = cytoscape({...});一旦我尝试存储 cy data 中的变量实例变量，即 this.cy = cy整个浏览器崩溃。有任何想法吗？
<template>
<div id="cyto" ref="cyto"></div>
</template>
<script>
import cytoscape from "cytoscape";
export default {
name: "HelloWorld",
data: function() {
return {
cy: null
};
},
props: {
msg: String
},
mounted() {
let cy = cytoscape({
container: this.$refs.cyto,
elements: [
// list of graph elements to start with
{
// node a
data: { id: "a" }
},
{
// node b
data: { id: "b" }
},
{
// edge ab
data: { id: "ab", source: "a", target: "b" }
}
],
style: [
// the stylesheet for the graph
{
selector: "node",
style: {
"background-color": "#666",
label: "data(id)"
}
},
{
selector: "edge",
style: {
width: 3,
"line-color": "#ccc",
"target-arrow-color": "#ccc",
"target-arrow-shape": "triangle"
}
}
],
layout: {
name: "grid",
rows: 1
}
});
//this line below breaks the browser
this.cy = cy;
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#cyto {
height: 100%;
display: block;
border: 1px solid blue;
}
</style>
最佳答案
您使用的是哪个版本的 cytoscape.js？
我遇到了同样的问题，并通过明确使用 3.2.22 版本解决了它。
使用此版本，您的示例似乎有效
var app = new Vue({
name: 'HelloWorld',
el: '#app',
data: function() {
return {
cy: null
}
},
props: {
msg: String
},
mounted() {
let cy = cytoscape({
container: this.$refs.cyto,
elements: [
// list of graph elements to start with
{
// node a
data: { id: 'a' }
},
{
// node b
data: { id: 'b' }
},
{
// edge ab
data: { id: 'ab', source: 'a', target: 'b' }
}
],
style: [
// the stylesheet for the graph
{
selector: 'node',
style: {
'background-color': '#666',
label: 'data(id)'
}
},
{
selector: 'edge',
style: {
width: 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
}
}
],
layout: {
name: 'grid',
rows: 1
}
})
//this line below breaks the browser
this.cy = cy
}
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/cytoscape@3.2.22/dist/cytoscape.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
#cyto {
width: 300px;
height: 300px;
display: block;
background-color: grey
}
</style>
</head>
<body><div id="app">
<div id="cyto" ref="cyto"></div>
</div>
</body>
</html>关于javascript - 如何将 cytoscape 对象存储在 Vue.js 数据实例中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53652692/