반응형
Vue.js 데이터 인스턴스 내의 cytoscape 객체를 어떻게 저장합니까?
vue.js 프레임워크 내에서 cytoscape.js를 사용하려고 합니다.간단한 템플릿을 만들었으며 변수도 있습니다.cy에서data부분.인mounted()후크 함수 호출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>이 소스에 따르면 뷰를 초기화하려면 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>다음 방법으로 세포내시경 인스턴스를 저장할 수 있습니다.
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;}
}
};
언급URL : https://stackoverflow.com/questions/53652692/how-can-i-strore-the-cytoscape-object-inside-vue-js-data-instance
반응형
'source' 카테고리의 다른 글
| iPhone에서 Objective-C를 사용한 메서드 이름 NSLogg (0) | 2022.08.08 |
|---|---|
| C/C++, 문자열 리터럴에 #파일을 포함할 수 있습니까? (0) | 2022.08.08 |
| char가 표준으로 1이면 size of(char)이라고 쓰는 이유는 무엇입니까? (0) | 2022.08.07 |
| 주체, 사용자 및 주체 간의 의미와 차이점은 무엇입니까? (0) | 2022.08.07 |
| vue 2와 함께 작동하도록 진행 표시줄 가져오기 (0) | 2022.08.07 |