Is there a way to export data made by vue?

[SangRyul]

hello, I'm trying to make custom node with vue. So I use typenode : 'vue' and import vue component to the node. and It worked.

And then, I tried to export the data and store in database. After that I tried to import data , but it doesn't work.(It deosn't make the graph). I checked It works with html file. ' This is vue version

{ "drawflow": { "Home": { "data": { "5": { "id": 5, "name": "db_link_box_textarea", "data": {}, "class": "db_link_box_textarea", "html": "NodeClick", "typenode": "vue", "inputs": { "input_1": { "connections": [] } }, "outputs": { "output_1": { "connections": [] } }, "pos_x": -272.29166666666663, "pos_y": 116.66666666666664 } } } } }

and this is html version

{ "drawflow": { "Home": { "data": { "6": { "id": 6, "name": "end_box", "data": {}, "class": "end_box", "html": "\n <div class=\"inner\">\n <div class=\"end-box\"><i class=\"fab fa-slack\"></i> End Box </div>\n </div>\n ", "typenode": false, "inputs": { "input_1": { "connections": [] } }, "outputs": {}, "pos_x": -191.45833333333326, "pos_y": 135.83333333333331 } } } } }

How can I use the data made by vue?

[jerosoler]

Hello @SangRyul

Do you import the vue component before importing?

[SangRyul]

@jerosoler hello. Yes I imported vue component at the head of script file in the single file component, and I checked it works, but when I export the data and import again, The plot doesn't showed. I think export data and import data don't contain the structure of vue file(cf. html mode works)

[jerosoler]

Is there an error displayed on the console?

var exportvalue = null;
exportvalue = editor.export();
editor.import(exportvalue);

Does this work for you? Or does it give you an error?

[mauro-baptista]

I faced a similar problem where after import the value in Vue it will not update the df- fields when I export it again. I could realise it will only properly update if I change it by hand.

So, I made a quick hack about it:

<template>
    <sender-node>
        <input type="hidden" df-template_id ref="template_id" id="template_id" />
        <input type="hidden" df-template_name ref="template_name" id="template_name" />
    </sender-node>
</template>

<script>
import SenderNode from "@/Flow/Nodes/SenderNode";

export default {
    components: {
        SenderNode,
    },

    props: {
        data: Object,
    },

    mounted() {
        this.$nextTick(() => {
            this.data.template_id = this.$refs.template_id.value
            this.data.template_name = this.$refs.template_name.value
        });
    },

    methods: {
        select(template) {
            this.data.template_id = template.id
            this.data.template_name = template.name

            this.$refs.template_id.value = template.id
            this.$refs.template_name.value = template.name

            this.$refs.template_name.dispatchEvent(new Event('input', {bubbles: true}));
            this.$refs.template_id.dispatchEvent(new Event('input', {bubbles: true}));
        },
    },
}
</script>

Note: The code was cut to keep the important parts, the df fields are updated via a modal that is not important for it.

Which is basically dispatch the input event after update it. Quite dirty, but worked just fine.