Vue2Editor not displaying updated content following data retrieval from axios call

Question

Vue2Editor not displaying updated content following data retrieval from axios call

I've encountered an issue with my Vue component that uses Vue2Editor. Everything was working great until I tried to update the content using data from an async function.

To troubleshoot, I tested updating text in a simple div.

Here's a snippet of my async function code:

async getPost(id) {
   this.content = "Here works"; // Update both content
   const {data} = await pressRepository.getPost(id)
   document.getElementsByClassName("ql-editor")[0].focus();
   this.content = data.article; // Update just the div content
}

Success:

<div> {{content}}</div>

Issue:

<vue-editor v-model="content" :editorToolbar="customToolbar"></vue-editor>

[EDIT]

Fixed! by commenting out this line:

//document.getElementsByClassName("ql-editor")[0].focus();

javascript vue.js asynchronous

Answer 1

Answer №1

Give this a shot.

async fetchPost(id) {
   this.message = "Success"; // Modify message
   const {data} = await postApi.fetchPost(id)
   document.getElementsByClassName("ql-editor")[0].focus();

   this.$nextTick(() => {
     this.message = data.article; // Update specific content
   })
}

Answer 2

Give this a shot.

async fetchPost(id) {
   this.message = "Success"; // Modify message
   const {data} = await postApi.fetchPost(id)
   document.getElementsByClassName("ql-editor")[0].focus();

   this.$nextTick(() => {
     this.message = data.article; // Update specific content
   })
}

Answer 3

Answer №2

Give this a try: this.$forceUpdate()

Additionally, here is a functional example:

<template>
  <div id="app">
    <vue-editor v-model="body"/>
    <button @click="update">Update</button>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  name: "App",
  components: {
    VueEditor
  },
  data() {
    return {
      body: `<b>Lost list↓↓↓</b>
    <ul>
       <li>a</li>
       <li>a</li>
       <li>a</li>
    </ul>
    <b>Lost list↑↑↑</b>`
    };
  },
  methods: {
    update() {
      this.body = 'Test texttttt ';
    }
  }
};
</script>

Answer 4

Give this a try: this.$forceUpdate()

Additionally, here is a functional example:

<template>
  <div id="app">
    <vue-editor v-model="body"/>
    <button @click="update">Update</button>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  name: "App",
  components: {
    VueEditor
  },
  data() {
    return {
      body: `<b>Lost list↓↓↓</b>
    <ul>
       <li>a</li>
       <li>a</li>
       <li>a</li>
    </ul>
    <b>Lost list↑↑↑</b>`
    };
  },
  methods: {
    update() {
      this.body = 'Test texttttt ';
    }
  }
};
</script>

Answer 5

Answer №3

I successfully resolved the issue by uncommenting the code

    //document.getElementsByClassName("ql-editor")[0].focus();

Strange that it wasn't functioning properly with the async function, but the problem has been rectified.

Answer 6

I successfully resolved the issue by uncommenting the code

    //document.getElementsByClassName("ql-editor")[0].focus();

Strange that it wasn't functioning properly with the async function, but the problem has been rectified.

Vue2Editor not displaying updated content following data retrieval from axios call

Answer №1

Answer №2

Answer №3

Similar questions

The issue persists as AJAX data and text box data are not being saved simultaneously

Guide on waiting for AWS assumeRole before proceeding with defining the module

Extracting data from a webpage's dynamic table using Python with Selenium and

Ways to verify if a specific email and name are already present in MongoDB

Struggling with Getting My Animation to Function Correctly

Problem with Angular: ng-show not constantly re-evaluating expression

Looking for an easy solution in RegExp - how to locate the keys?

What could be the reason for the list being undefined even though I explicitly defined it within the <script setup> section of my Nuxt 3 Project?

When generating a docx file with html-docx-js, it lacks the capability to incorporate external CSS class styles into the document

Dynamically load scripts in angularJs

Update article translation dynamically in Vue without needing to refresh the page

The issue of onClick failing to function when paired with the addEventListener for the

Is there a way to dynamically apply multiple classes to a <span> element in Vue.js and Tailwind based on an element from an array?

The method "_super" is not supported by the object in igGrid

Passing the value of an Angular component to a different component

Creating dynamic height based on width using JavaScript

How can we properly access the DOM element generated by an {#each} loop in Svelte when it is clicked?

Concealing a button once the collapse feature is toggled in Bootstrap

Exporting Rendered HTML from a v-html Component in Vue

Using a combination of jQuery and JavaScript to switch image tags between different classes