vue项目使用wangEdit组件时，从后台接口获取到的值渲染不了页面

问题描述：项目多处需要文本编辑器组件，就手动封装了一个edit组件，但是在页面上用封装组件时，从后台接口返回的content数据，并没有在wangEdit编辑器中回显,是因为在初始化组件时，接口还没有返回数据，但是我用的v-model双向绑定的，为什么数值变化，还是没有回显呢

封装组件代码

<template>
  <div>
    <div
      ref="editor"
      style="text-align:left"
    ></div>
  </div>
</template>

<script>
import WangEditor from "wangeditor";
export default {
  name: "editor",
  model: {
    prop: "editorContent",
    event: "change"
  },
  props: {
    editorContent: { required: true }
  },
  mounted() {
    /*实例化*/
    var editor = new WangEditor(this.$refs.editor);
    editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'emoticon',  // 表情
        'image',  // 插入图片
        'undo',  // 撤销
    ]
    /*设置上传图片*/
    
    editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片 与上传服务器只能用其中一种方法
    // editor.customConfig.uploadImgServer = "/upload/image/";// 上传图片到服务器
    editor.customConfig.uploadFileName = "fileToUpload";
    editor.customConfig.showLinkImg = false// 隐藏“网络图片”tab
    // editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024// 将图片大小限制为 3M
    // editor.customConfig.uploadImgMaxLength = 5// 限制一次最多上传 5 张图片
    editor.customConfig.uploadImgHooks = { //可使用监听函数在上传图片的不同阶段做相应处理
      customInsert: function(insertImg, result, editor) {
        var url = result.data;
        insertImg(url);
      }
    };
    /*绑定回馈事件*/
    editor.customConfig.onchange = html => {
      this.$emit("change", html);
    };
    /*创建编辑器*/
    editor.create();
    /*初始内容*/
    editor.txt.html(this.editorContent);
  }
};
</script>

add.vue项目文件代码

<template>
   <div>
    <editor-template v-model="newForm.inputValue" ></editor-template>
  </div>
</template>
<script>
import editorTemplate from 'src/components/editor'
data(){
  newForm:{},
},
components: {
            editorTemplate
 },
created(){
  this.getDetail()
},
methods:{
        getDetail(){
                getDetail(id).then(res =>{
                    if(res.data.code=="200"){
                        this.newForm=res.data.data;//此处有值
                        console.log( this.newForm.inputValue)      //后端返回的content: "<h1>哈哈</h1>"
             
                    }
                })
        },
}
</script>

结果就是在在组件加载时，this.editorContent = '' ,然后我就想是不是我可以先请求后端接口，等后端接口返回数据后我再开始去加载子组件，然后解决了。哈哈哈。

修改代码如下

<template>
   <div>
    <component :is="loadEdit" :editorContent="newForm.inputValue"></component>
  </div>
</template>
<script>
import editorTemplate from 'src/components/editor'
data(){
  newForm:{},
  loadEdit:null,//加载的组件-解决wangEdit从后台拿到数据后，页面渲染不出的问题
},
components: {
            editorTemplate
 },
created(){
  this.getDetail()
},
methods:{
        getDetail(){
                getDetail(id).then(res =>{
                    if(res.data.code=="200"){
                        this.newForm=res.data.data;//此处有值
                        this.loadEdit = editorTemplate//请求成功，加载子组件
                        console.log( this.newForm.inputValue)                   
                    }
                })
        },
}
</script>

结果：

image.png