Add a method to get Vue comonents once created

[ghost]

Hey @jerosoler,

We are still using Drawflow and its working really well!

We have been looking into making our flows more dynamic and have started using Vue comonents. However we would like a method to be able to grab the Vue components when we need them. This is so that we can send through variables and use events.

I wanted to show you the way that I managed to get this working but I was wondering if it would be possible for you to add something similar to the repo?

Firstly in addNode, I made the created Vue component assign to the wrapper variable nearer the top. Then near the bottom I added the wrapper to the "JSON"

addNode(name, num_in, num_out, ele_pos_x, ele_pos_y, classoverride, data, html, typenode = false){
...
let wrapper = null;

if (typenode === false) {
  content.innerHTML = html;
} else if (typenode === true) {
  content.appendChild(this.noderegister[html].html.cloneNode(true));
} else {
  if (parseInt(this.render.version) === 3) {
    //Vue 3
    wrapper = this.render.h(this.noderegister[html].html, this.noderegister[html].props, this.noderegister[html].options);
    wrapper.appContext = this.parent;
    this.render.render(wrapper, content);

  } else {
    // Vue 2
    wrapper = new this.render({
      parent: this.parent,
      render: h => h(this.noderegister[html].html, {
        props: this.noderegister[html].props
      }),
      ...this.noderegister[html].options
    }).$mount()
    //
    content.appendChild(wrapper.$el);
  }
}
...
var json = {
  id: newNodeId,
  name: name,
  data: data,
  class: classoverride,
  html: html,
  typenode: typenode,
  inputs: json_inputs,
  outputs: json_outputs,
  pos_x: ele_pos_x,
  pos_y: ele_pos_y,
  wrapper: wrapper
}

Then I created a function to grab this later:

getVueComponentFromId(nodeid) {
  var t = this.getModuleFromNodeId(nodeid);
  return this.drawflow.drawflow[t].data[nodeid].wrapper;
}

However the problem with this method is the export and import functions wont work as it will try and json parse the JSON.

Would it be possible for you to sort this via another method of storage?

Kind Regards, Joe

[jerosoler]

Hi @icabbi-joegarlick

I understand your problem.

I think the solution could be this, without having to touch the library. A connectop test with the "nodeSelected" event.

this.$df.on('nodeSelected', (id) => {
      const parent = document.getElementById(`node-${id}`);
      const ele = parent.querySelector('.drawflow_content_node > div');
      console.log(ele.__vue__);
})

Test in vue2

Jero

[cacious7]

@jerosoler I was able to get the component using the code you mentioned here, however, there still seems to be a problem. I am unable to get the methods and data properties of the node. At least not the ones in the code.