Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to update the editor data dynamically? (axios)

See original GitHub issue


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?

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:11 (6 by maintainers)

github_iconTop GitHub Comments

camyacommented, May 20, 2019


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.

yashhacommented, May 20, 2019

I think we would have to add a load/render function to the editor:

Hm wait that is only a blocks api. …

Probably the editor has to be reinitialized.

Read more comments on GitHub >

github_iconTop Results From Across the Web

ReactJS - Dynamically updating HTML when API returns ...
Try setMatchInfo( instead. Share.
Read more >
Making Dynamic Axios API Queries in React - DevCamp
So I'm gonna say method and then the next one is just going to be URL. And that's gonna be this.state.apiUrl and then...
Read more >
Fetch API data with Axios and display it in a React app with ...
This article will go over how to fetch data with Axios in React, save it to state, and then display it in a...
Read more >
Getting Started with Axios | Bits and Pieces
With GET, we can read data. With POST, we can write/overwrite data to our resource. With PATCH, we can update data within our...
Read more >
Client-side routing for dynamic pages | Frontend Development
You need a data source extension to fetch the list of movies from the SWAPI and a custom Frontend component to render the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found