How to update the editor data dynamically? (axios)

Hi,

I integrated the vue-editor-js in my vue project and it works fine. Saving the data into my database works.

Unfortunately I can’t find a way to dynamically update the <editor> component data.

How to update the editor data from my data retreived from the database?

<template>
    <editor :init-data="articleBlocks" />
</template>
    
<script>
export default {
    data() {
        return {
            articleBlocks: {}
        }
    },
    methods: {
        onListEdit(listId) {
            axios.get('/api/lists/' + listId)
                .then(response => {
                    let item = response.data;
                    this.articleBlocks = JSON.parse(item.articleBlocks);
                })
            ;
        }
    }
}
</script>

[camya]

Hi,

I tried this too. Unfortunately I can’t get it to work, and I don’t know why. That’s really a pity, because saving works just fine.

Looks like :init-data requires an object (I just pass an empty object by now), but the “blocks” part of the returned data is an array of block objects. This isn’t compatible. It’s not defined what " :init-data" is, and how to initialize / update it correctly. I’ve done this with try and error.

Maybe it’s possible for you to create an example, how the loading / saving of data works.

[yashha]

I think we would have to add a load/render function to the editor: https://editorjs.io/blocks#render

Hm wait that is only a blocks api. …

Probably the editor has to be reinitialized.