Tengo un editor de texto de pluma y, de forma predeterminada, quiero configurarlo como de solo lectura y cuando se hace clic en el botón, debería ser verdadero/falso. Así que aquí está mi componente:

 <template> <div 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: { disabled: { type: Boolean, default: false }, value: { type: String, default: '' } }, data() { return { editor: null, }; }, mounted() { this.editor = new Quill(this.$refs.editor, { modules: { toolbar: [ [{ header: [1, 2, 3, 4, false] }], ['bold', 'italic', 'underline'] ] }, readOnly: this.disabled, theme: 'snow', formats: ['bold', 'underline', 'header', 'italic'] }); this.editor.root.innerHTML = this.value; this.editor.on('text-change', () => this.update()); }, methods: { update() { this.$emit('input', this.editor.getText() ? this.editor.root.innerHTML : ''); } } } </script>

Estoy enviando este valor como accesorio a mi componente que está 'deshabilitado' y cuando hago clic en el botón, verdadero se convierte en falso y cuando hago clic nuevamente, viceversa. Así que no hay nada de malo en eso. También cuando hago readOnly: true, o readOnly: false funciona pero de esta manera, readOnly: this.disabled no funciona.

Estoy usando vue pero creé un componente basado en quilljs directamente.

La documentación que uso es esta: https://quilljs.com/docs/configuration/#readonly