[英]How can I strore the cytoscape object inside Vue.js data instance?
我正在尝试在 vue.js 框架中使用 cytoscape.js。 我制作了一个简单的模板，并且在data部分还有一个变量cy 。 我称之为cytoscape的 in mounted()钩子函数。 只要我将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>
根据此来源，您必须调用 renderView 才能初始化视图：
// index.js import Cytoscape from './Cytoscape.vue'; export default Cytoscape;
/* cssFile.css */ #cyto { height: 100%; display: block; border: 1px solid blue; }
<!-- AppVue.js --> <template> <div class="cytoscape"></div> </template> <style> </style> <script> import cytoscape from 'cytoscape'; export default { name: "HelloWorld", data: function() { return { cy: null }; }, props: { msg: String }, methods: { renderView: function(newElements) { // the only reliable way to do this is to recreate the view 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 } }); } }, mounted: function() { this.$emit('created', this); } } </script>
在准备好cy实例之前，您无法存储它。因此，在mount方法中，最后添加：
data() {
return {
cy: null
}
},
mounted() {
let cy = cytoscape({
...
})
cy.ready(() => {
this.cy = cy
})
}
您可以将 cytoscape 实例存储在一个方法中：
export default {
name: "HelloWorld",
methods: {
getCy: function () {
return null;
}
}
mounted() {
const cy = cytoscape({
container: this.$refs.cyto,
elements: [{data: { id: "a" }}]
});
this.getCy = () => {return cy;}
}
};
聚会很晚，但这里的答案都没有解决问题或解释为什么会发生。 尝试使用 $ 定义变量：
..
data: () => ({
$cy: null
..
})
通常，该变量必须是公共的，以防止浏览器挂起。
如何使用vue.js从promise中的方法更新数据值？
[英]How can I update a data value from a method inside a promise with vue.js?
当我添加数据对象'job'时，错误：vue.js:634 [Vue warn]: Property or method "job" is not defined on the instance
[英]When I add the data object 'job', the error : vue.js:634 [Vue warn]: Property or method "job" is not defined on the instance
Vue.js-如何在数组中显示对象，该数组在对象内部？
[英]Vue.js - How do I display an object in an array, that the array is inside of an object?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.