Update only node's name

[doijunior]

I have a simple cytoscape instance like this:

   <cytoscape
      ref="cy"
      id="cy"
      :config="config"
       v-on:click="selectState"
    >
      <cy-element
        v-for="def in elements"
        :key="`${def.data.id}`"
        :definition="def"
      />
    </cytoscape> 

My elements is computed array from a vuex store:

    elements(){
      return this.$store.getters['builder/elements'];
    }

When I update adding nodes and edges things work ok, but when I update only node's name the canvas don't update. I do understand that it is a limitation of the reactivity due the changes in an object attribute, but I didn't found how can I call layout() again

[rcarcasses]

Hi @doijunior, yes, you are right, currently reactivity support is limited although it could be extended in the future. To re-run the layout() again, I would recommend to store the cy instance you get in afterCreated lifecycle hook and store a reference to it in your component's scope, this way you can invoke any method whenever is convenient for you. Let me know if that works for you.

[doijunior]

@rcarcasses I am trying to store in a data variable like this:

    afterCreated(cy) {
      this.instance = cy;
    }

But when I add this, the page never loads (but doesn't throw any error)

[rcarcasses]

what about this?

...
<script>
...
let resolveCy = null
export const cyPromise = new Promise(resolve => (resolveCy = resolve))

// component's object
export default {
  methods: {
    afterCreated(cy) {
      resolveCy(cy)
    },
    async anotherMethod() {
      const cy = await cyPromise
      ...
    }
}
...

[doijunior]

@rcarcasses with your solution I was able to call layout() but the problem wasnt solved because the graph was rerendered with the old names. I was able to solve it by changing the elementidalong with the name. I didnt want to change the id because this data is recovered from my api, then I created an id concatened with a timestamp from the last name change