Vuejs and Gojs - databinding not updating

GoJS
1

I am using the VueJS/Gojs example: https://gojs.net/latest/samples/vue.html

On the parent, under mounted, I have a function call:

  this.getLevel()

Under methods, I have a Axios powered async call to my MongoDB:

  async getLevel () {
    console.log('trying...');
    const response = await ProjectService.getLevel(this.$route.params.id);
    this.diagramData = response.data.level.startNodeData;
   // console.log(response.data.level.startNodeData);
  },

Under data I have an empty array waiting for the update from the function callback:

data () {

  return {
    diagramData: [],
  }
},

The data is bound and sent to the component like this:

 <NodeViewer v-bind:model-data="diagramData"  v-on:changed-selection="changedSelection" ></NodeViewer>

Now, in the child (component) I have Props like this:

 props: ["modelData"],  // accept model data as a parameter

My question is why is it that if I add JSON directly into the diagramData the child updates as expected without issue (just like the GoJS Vue example), but when I update the diagramData using the async method in the mount, the child component does not update as expected? I do see the JSON when I do a console log here but the diagram is not updating with the nodes/links:

methods: {
  model: function() { return this.diagram.model; },
  updateModel: function(val) {
    console.log(val);
    // No GoJS transaction permitted when replacing Diagram.model.
    if (val instanceof go.Model) {
      this.diagram.model = val;
    } else {
      var m = new go.GraphLinksModel()
      if (val) {
        for (var p in val) {
          m[p] = val[p];
        }
      }
      this.diagram.model = m;
    }
  },

Should I not be mounting the async call? Should it be in another lifecycle hook like created?

2

I’m not really familiar with Vue, so I’m not sure what is going on. But my guess is that the problem has nothing to do with your update being “async”.

Is it the case that you really are replacing the diagramData property with a completely new Array? If so, I’m surprised the watch on that property is not executing.

3

Well, it was as simple as converting the async callback with JSON.parse like this:

this.diagramData = JSON.parse(response.data.level.startNodeData);

Was sending a string and not an object. Hope this helps others :)