How to show default value in Quill text editor in Vue3

Question

As you can see in the picture, I have a text editor with Quill. this is admin panel in my project and when I write something in my text editor and want to display it, it is working fine. For example, if I want to write a description in bold it goes to the front end like this:

Description

and I can display it with this code:

<div v-html="product.attributes.description"></div>

But my problem is I want to show this value inside of y text editor. So I want to show bold written 'Description' in my text editor instead of undefined but I couldnt figured out how to do it with Quill text editor. Here is my text-editor component:

<template>
  <div class="form-control" v-bind:class="inputClasses" ref="editor"></div>
</template>
<script>
import Quill from 'quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.bubble.css';
import 'quill/dist/quill.snow.css';

export default {
  props: {
    modelValue: { type: String, default: '' },
    defaultValue: "",
  },
  data() {
    return {
      editor: null,
    };
  },
  mounted() {
    var _this = this;

    this.editor = new Quill(this.$refs.editor, {
      modules: {
        toolbar: [
          [{ header: [1, 2, 3, 4, false]} ],
          ["bold", "italic", "underline", "link", "image"],
        ],
      },
      theme: "snow",
      formats: ["bold", "underline", "header", "italic", "link"],
      placeholder: this.placeholder
    });
    this.editor.root.innerHTML = this.defaultValue;
    this.editor.on("text-change", function () {
      return _this.update();
    });
  },
  methods: {
    update: function update() {
      this.$emit(
          "update:modelValue",
          this.editor.getText() ? this.editor.root.innerHTML : ""
      );
    },
  },
}
</script>

Answer 1

If I understood your question properly, you want to set the value of the editor?

If so, I had the same problem and was able to resolve using this answer: How to use v-model in quill editor

<quill-editor v-model:content="modelname" contentType="html" />

Then you can set and retrieve the editor content using the 'modelname' property. Hope it helps!

Answer 2

How I got rid of the undefined value when contentType='html'.

<QuillEditor theme="snow" ref="quill" v-model:content="modelName" contentType="html" placeholder="Type job description here..." style="height: 300px"/>

mounted() {
  this.$refs.quill.setContents('')
}

Answer 3

for setting default value for quill-vue use this like this according to this link

                    <QuillEditor class="pb-8 pr-6 w-full" contentType="html" v-model:content="form.content" theme="snow" />