Vue + wangEditor rich text editor, failed to insert content into the text box during initialization

I want to implement an editing operation. When I enter the page, I get the data from the background and insert the data into the rich text box. The
data is requested, but the official method editor.txt.html () fails to insert the data into the text box.

here is a screenshot and the code:
the red arrow refers to the data I requested, that is, the data I want to insert into the text box, but I don"t know why it is empty

.

Code

Code in HTML

  <el-form :model="quizData" ref="testForm">
    <el-form-item label="" required>
      <br>
      <div ref="editor" style="text-align:left"></div>
      {{this.quizData.quizTitle}}
    </el-form-item>
 </el-form>

data request in create

created () {
  this.getQuizInfo()

 //getQuizInfomethods
  getQuizInfo () {
    quizInfo().then(res=>{
      this.quizData = res.data
    })
  },
},

data structure of quizData

 quizData:{
    "quizId": 0,
    quizTitle: "",
    quizType: 0,   
    "updateTime": "2018-11-28T03:10:25.082Z",
},

text box initialization in mounted

mounted() {
  var editor = new E(this.$refs.editor)
  editor.customConfig.onchange = (html) =>{
    console.log(html)
    this.quizData.quizTitle = html
  }
  editor.customConfig.menus = [
    "head",  // 
  ]
  editor.create()
  editor.txt.html(this.quizData.quizTitle)
},
Feb.07,2022

@ Yiyun _ Xiaoyin method is very correct, and there is another solution:

When initializing editor in

mounted , use this.editor , and do not assign editor.txt.html (this.quizData.quizTitle)

here.
mounted() {
  this.editor = new E(this.$refs.editor)
  this.editor.customConfig.onchange = (html) =>{
    console.log(html)
    this.quizData.quizTitle = html
  }
  this.editor.customConfig.menus = [
    'head',  // 
  ]
  this.editor.create()
},

in this case, in methods , you can flexibly use this.editor assignment this.editor.txt.html () , emptying this.editor.txt.clear () and so on.

//methods
  getQuizInfo () {
    quizInfo().then(res=>{
      this.quizData = res.data
      this.editor.txt.html(this.quizData.quizTitle)   
      // this.editor.txt.html(this.res.data.quizTitle) 
    })
  },

clipboard.png
here it seems that the server gets the data, which is asynchronous.

so the question is: when create sends a request to obtain data, mounted uses data directly, so how can you ensure that the data request is successful when you mounted? Your problem should be that there is no data when you assign mounted values, so it is invalid.

getting the data setting data should be a method, which should be called at the time of mounted to get the data and then assign the value.

mounted() {
  var editor = new E(this.$refs.editor)
  editor.customConfig.onchange = (html) =>{
    console.log(html)
    this.quizData.quizTitle = html
  }
  editor.customConfig.menus = [
    'head',  // 
  ]
  editor.create()
  this.quizInfo().then(res=>{
     this.quizData = res.data
     editor.txt.html(this.quizData.quizTitle)   
  })  
},

Thank you for asking, your question description solved my problem!

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b36154-2bfd9.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b36154-2bfd9.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?