Estoy trabajando en VueJS 3 y acabo de agregar TipTap Editor. Solo quiero mostrar el menú del editor cuando el usuario hace clic en el contenido, activando el evento de enfoque. Luego, al desenfocar, el menú debe estar oculto. Así que agregué un ref="myMenu" al componente del menú e inicié el editor con los controladores de eventos opFocus nad onBlur.
Problema, "esto" hace referencia al alcance del Editor y no a "esto" que conoce las $refs. Pregunta, ¿cómo paso las propiedades globales?
mi plantilla
<div v-if="editor"> <menu-bar class="editor__header" :editor="editor" ref="editMenu" /> <editor-content :editor="editor" /> </div>mi codigo vue
mounted(){ // this.store.methods.TextAreaAdjust(this.$refs.itemParagraph); this.editor = new Editor( { extensions: [ StarterKit.configure({ history:true, }), Highlight, ], content: this.modelValue.itemData.paragraph, onUpdate: () => { this.modelValue.itemData.paragraph=this.editor.getHTML() }, onFocus(){ console.log('focus fired') console.log(this) // editor scope this.$refs.editMenu.style.display="flex" // $refs undefined error }, onBlur(){ console.log('blur fired') this.$refs.editMenu.style.display="none" } }) },Intenta definir las funciones on con funciones de flecha:
onUpdate: () => {} ononFocus: () => {} onBlur: () => {} Esto debería mantener this alcance.
De lo contrario, probablemente necesite almacenar this en una constante separada, antes de crear la instancia del Editor y luego usar thisComponent en sus controladores:
const thisComponent = this;