vue (v2) ref to Node (register as vue component)

[okosowski]

Hello all

TL;DR: is there any chance to use vue ref to register/added Node and execute public method inside this component?

ALL: I'm using drawflow in vue2 project (typescript and vue-property-decorator but this is not relevant right now). When I register/add a new Node which is vue component I don't have access to it. Any ref doesn't work :/.

EXAMPLE

myVueNodeComponent.vue

<template>
    <p ref="test">Lorem ipsum</div>
</template>

<script lang="ts">
(...)
export default class MyVueNodeComponent extends Vue {
    (...)
    public getSth(): SOME {
        return ...
    }
}
</script>

someParentComponent.vue

import MyVueNodeComponent from ...
(...)
private addNode(): void {
  (...)
  this.editor.registerNode(name, MyVueComponent, props, options);
  this.editor.addNode('someName', 1, 1, posx, posy, '', data, html, name,'vue');
}

private someOtherMethodWhereIWouldLikeToHaveAccessToMyVueComponent(): void {
  (this.$refs.test as MyVueNodeComponent).getSth() <- this refs doesn't work :/
}

I'd love to be able to execute (this.$refs.test as MyVueNodeComponent).getSth() but Vue can't find any "test" reference

[jerosoler]

Hi @okosowski

The method in which drawflow creates the nodes is with the render method and passes the parent instance to it.

The child reference is not accessible.

If you want to call a child function you can use a bus. View example: https://github.com/jerosoler/Drawflow/issues/37#issuecomment-717822302

The question you propose, what happens if you create two equal nodes with the same reference? If I'm not mistaken the reference cannot be dynamic in vue.

Hope it helps you.

[okosowski]

in case of multiple ref with the same name, results will be Array and this is ok for me.

For now, I will try to do it using eventBus, thanks for the fast response!