如何在VUE中固定Quill中的prop值

发布于 2025-02-01 00:08:21 字数 1249 浏览 0 评论 0原文

我想为我的Quill Text Editor设置默认值,然后将Props发送给名为DefaultValue的组件:

props: {    defaultValue: "",
  },

我像这样创建了我的文本编辑器:

<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 : ""
      );
    },
  },

但是this.editor.settext(this.defaultValue);值是未定义的,我会收到这样的警告:属性在渲染过程中访问了“错误”,但并未定义。 at&lt; texteditor label =“ description” modelValue = undefined onupdate:modelValue = fn ...&gt;

我几乎尝试了所有解决此问题的一切,但我仍然没有成功。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文