v-model:content not working when changed the binding value

[erhuabushuo]

v-model:content not working when changed the binding value, it seems not two way binding,

@feature

[aydot]

@erhuabushuo
Did you try it like so:
<QuillEditor v-model:content="myContent" contentType="html"/>

[thedomeffm]

Solved this problem like this (vue 3 with TS):

Updated 2022-11-12

<template>
    <div class="app-editor">
        <QuillEditor ref="editor"
                     v-model:content="value"
                     :options="options"
                     content-type="html" />
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default defineComponent({
    components: {
        QuillEditor,
    },

    props: {
        modelValue: {
            type: String,
            required: false,
            default: null,
        },
    },

    emits: ['update:modelValue'],

    data() {
        return {
            // https://vueup.github.io/vue-quill/guide/options.html#option-attributes
            options: {
                // debug: 'info',
                toolbar: 'essential',
                placeholder: '...',
                theme: 'snow',
            },
            internalValue: null as string|null,
        };
    },

    computed: {
        value: {
            get(): string|null|undefined {
                return this.modelValue;
            },
            set(newValue: string | null) {
                this.internalValue = newValue;
                this.$emit('update:modelValue', newValue);
            },
        },
    },

    watch: {
        modelValue(newValue) {
            if (newValue === this.internalValue) {
                return;
            }

            this.$refs.editor.setHTML(this.modelValue);
        },
    },
});
</script>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[vz-spr]

Didn't work for me @thedomeffm , because cursor moved to the beginning for some reason when i started typing
The main problem was that after initialised with null or undefined I needed to update after fetch data from server.
So i found another robust solution which main idea is something like:

<script lang="ts" setup>
import Quill from 'quill'
import {onMounted, ref, watch} from 'vue'


const props = defineProps<{
    modelValue: string|null
    syncValue?: string|null
}>()
const emits = defineEmits(['update:modelValue'])
const div = ref(null)
let quill = null
onMounted(() => {
    quill = new Quill(div.value, {
        theme: 'snow'
    })

    quill.on('text-change', () => {
        console.log('--- text change', quill.root.innerHTML)
        emits('update:modelValue', quill.root.innerHTML)
    })
})
let _syncValue = props.syncValue
watch(props,  (newP) => {
    console.log('--- sync value, new and old', newP.syncValue, _syncValue)
    if (newP.syncValue === _syncValue) {
        return
    }
    let delta = quill.clipboard.convert(newP.syncValue)
    quill.setContents(delta, 'api')
    _syncValue = newP.syncValue
})
</script>

<template>
    <div class="quill-wrapper" ref="div"></div>
</template>

[carlos-mora]

This one is a significant issue, as it's spected to work as usual with v-models.
Changing underlying data is a regular practice. Please pay attention to this.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[thedomeffm]

As can be seen with Issue #275, people still don't understand the behaviour of the editor!
As a solution one should either explain the behaviour in the documentation or solve the reactivity in vue-quill!

[Jasonchang6435]

<template>
  <div class="rich-text-wrap">
    <QuillEditor
      ref="edit"
      :content="html"
      content-type="html"
      @text-change="handleChange"
      :modules="modules"
      :toolbar="[
        [
          { header: 1 },
          {
            header: 2,
          },
          'bold',
          'italic',
          'underline',
          'strike',
          'blockquote',
          'code-block',
        ],
        [{ list: 'ordered' }, { list: 'bullet' }],
        ['image', 'link'],
      ]"
    />
  </div>
  <div class="text-len">{{ textLen }}</div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { Delta, QuillEditor } from "@vueup/vue-quill";
import ImageUploader from "quill-image-uploader";
import useImageUpload from "@/compositions/useImageUpload";

const props = defineProps<{
  len: number;
  html: string;
}>();

const emit = defineEmits<{
  (e: "update:len", value: number): void;
  (e: "update:html", value: string): void;
}>();

const { uploadHandle, uploadUrl } = useImageUpload();

const textLen = ref<number>(0);
const edit = ref();
const modules = ref({
  name: "imageUploader",
  module: ImageUploader,
  options: {
    upload: (file: File) => {
      return new Promise((resolve, reject) => {
        const formData = new FormData();
        formData.append("image", file);
        uploadHandle(file, "text")
          .then(() => {
            return resolve(uploadUrl.value);
          })
          .catch(() => {
            return reject(new Error("upload image failed"));
          });
      });
    },
  },
});

const handleChange = () => {
    textLen.value = edit.value.getText().trim().length;
    emit("update:len", textLen.value);
    emit("update:html", edit.value.getHTML());
};
</script>

when use v-model and contentType is html , when props value changes and the editor did not show corerctly, and I try to use pasteHtml to set. the cursor act weirdly

[Tofandel]

It's so trivial to fix the reactivity with an intermediate variable, I can make a PR

[cmora-pe]

Please!!!