Vuejs and Gojs - databinding not updating

@danaia wrote:

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?

Posts: 3

Participants: 2

Read full topic