Closed nilshae closed 5 years ago
Hey @nilshae, you're welcome! So I think you have done all the things well, but you are missing to re-run the layout()
method of cytoscape
after you dynamically add the new elements. Notice that this is how cytoscape
works and not related to vue-cytoscape
at all. I just updated the src/LayoutExtensionsExample.vue
with a code that illustrate how to use axios
to load external data and later update cytoscape
content with it. Another option is to do <cytoscape v-if="dataHasBeenLoaded"...>
, start with dataHasBeenLoaded = false
, load the data and then set the config elements with the data loaded and dataHasBeenLoaded = true
.
Notice that in the example I used cy
instance in afterCreated
method to add the elements through cytoscape
itself, you chose to add them by cy-elements
(congrats! you got the idea!). vue-cytoscape
has feature called DOM reflection
(a term I invented myself) that basically (attempts) to synchronise bidirectionally changes in the cytoscape
vue component (the one created by vue-cytoscape
) and the real cytoscape
content. Because of this, the end result should be the same.
Any other question, let me know!
I got it! Thank you for the explanation and the extended example.
Hello, does the example referenced here, syc/LayoutExtensionsExample.vue
, still exist? I am unable to find it.
Hello, thanks for providing vue-cytoscape!
I struggle with the the initialization of the cytoscape component. I have to fetch my data from a REST-API and parse it to get my elements object. The problem is, that fetching returns a promise, and the component is already rendered when this promise is resolved. My solution (see code) is to use cy-elements and fetch the data in preConfig, but this seems wrong, and doesn't run the layout again.
Is there a better way to handle this?