'how to setText prop value in Quill in Vue

I want to set a default value for my Quill text editor and I am sending props to my component named defaultValue:

props: {    defaultValue: "",
  },

and I created my text editor like this:

<div class="form-control" v-bind:class="inputClasses" ref="editor">/div>

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: 'bubble',
      theme: "snow",
      formats: ["bold", "underline", "header", "italic", "link"],
      placeholder: this.placeholder
    });
    this.editor.root.innerHTML = this.defaultValue;
    this.editor.setText(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 : ""
      );
    },
  },

But this.editor.setText(this.defaultValue); value comes undefined and I get warning like this: Property "error" was accessed during render but is not defined on instance. at <TextEditor label="Description" modelValue=undefined onUpdate:modelValue=fn ... >

I almost tried everything to solve this issue but still I am not successful.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source