vue-quill-editor默认赋值问题

最新推荐文章于 2024-07-12 15:45:55 发布

原创最新推荐文章于 2024-07-12 15:45:55 发布 · 5.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-quill-editor

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍在使用Vue-quill-editor富文本编辑器时，如何正确设置默认值。通过在ready方法中手动赋值，确保编辑器加载时显示预设内容，避免v-model直接赋值无效的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录项目中遇到的vue-quill-editor在编辑时，无法赋默认值问题

<myQuill v-model="form.content" :value="'1231231'"></myQuill>
↓
↓
↓
<quill-editor
  ref="myQuillEditor"
  v-model="content"
  :options="options"
  @ready="onEditorReady($event)">   
</quill-editor>

script部分
props： ['value']
data: { content: '' }
methods: {
   onEditorReady(dom)  {
        this.content = this.value    // 在ready方法中手动赋值
    }
}
watch: {
    value (val) {
      this.content = val    // 未生效
    }
}

参考资料：

使用文档： https://www.awesomes.cn/repo/surmon-china/vue-quill-editor