VueJs: Textarea Eingabebindung

Question

Ich versuche herauszufinden, wie man die Änderung des Wertes in der Textarea innerhalb der Komponente erkennen kann.

Für die Eingabe können wir einfach nutzen

<input 
    :value="value" 
    @input="update($event.target.value)" 
> 

jedoch auf TextArea- wird dies nicht funktionieren.

Woran ich arbeite, ist die CKEditor-Komponente, die den Inhalt von wysiwyg aktualisieren soll, wenn der Modellwert der übergeordneten Komponente (die an diese untergeordnete Komponente angehängt ist) aktualisiert wird.

Meine Editor Komponente sieht derzeit wie folgt aus:

<template> 
    <div class="editor" :class="groupCss"> 
     <textarea :id="id" v-model="input"></textarea> 
    </div> 
</template> 

<script> 
    export default { 
     props: { 
      value: { 
       type: String, 
       default: '' 
      }, 
      id: { 
       type: String, 
       required: false, 
       default: 'editor' 
      } 
     }, 
     data() { 
      return { 
       input: this.$slots.default ? this.$slots.default[0].text : '', 
       config: { 
        ... 
       } 
      } 
     }, 
     watch: { 
      input(value) { 
       this.update(value); 
      } 
     }, 
     methods: { 
      update(value) { 
       CKEDITOR.instances[this.id].setData(value); 
      }, 
      fire(value) { 
       this.$emit('input', value); 
      } 
     }, 
     mounted() { 
      CKEDITOR.replace(this.id, this.config); 
      CKEDITOR.instances[this.id].setData(this.input); 
      this.fire(this.input); 
      CKEDITOR.instances[this.id].on('change',() => { 
       this.fire(CKEDITOR.instances[this.id].getData()); 
      }); 
     }, 
     destroyed() { 
      if (CKEDITOR.instances[this.id]) { 
       CKEDITOR.instances[this.id].destroy() 
      } 
     } 
    } 
</script> 

und ich schließe es innerhalb der übergeordneten Komponente

<html-editor 
    v-model="fields.body" 
    id="body" 
></html-editor> 

jedoch bei jedem Modell Wertänderungen des übergeordneten Komponente - den Beobachter nicht ausgelöst hat - Das Fenster des Editors wird nicht aktualisiert.

Ich brauche nur update() Methode aufgerufen werden, wenn Elternmodell fields.body aktualisiert wird.

Jeder Zeiger, wie könnte ich es nähern?

Answer 1

Das ist ein gutes Stück von Code ist zu entziffern, aber, was ich tun würde, den Textbereich und die WYSIWYG-HTML-Fenster in zwei Komponenten zerlegen und dann die Werte Mutter Sync haben, so:

TextArea- Komponente:

<template id="editor"> 
    <textarea :value="value" @input="$emit('input', $event.target.value)" rows="10" cols="50"></textarea> 
</template> 

/** 
* Editor TextArea 
*/ 
Vue.component('editor', { 
    template: '#editor', 
    props: { 
    value: { 
     default: '', 
     type: String 
    } 
    } 
}); 

 

Alles, was ich bin hier, um die Eingabe zurück an die Mutter emittierenden tun, wenn sie sich ändert, ich bin mit Eingang als Ereignisnamen und value als die Stütze, so kann ich v-model auf dem Editor verwenden. Jetzt nur ich brauche ein WYSIWYG-Fenster den Code zu erhalten:

WYSIWYG-Fenster:

/** 
* WYSIWYG window 
*/ 
Vue.component('wysiwyg', { 
    template: `<div v-html="html"></div>`, 
    props: { 
    html: { 
     default: '', 
     type: String 
    } 
    } 
}); 

Es gibt nicht viel los dort, macht es einfach den HTML-Code, der als Stütze übergeben wird.

Schließlich brauche ich nur die Werte zwischen den Komponenten zu synchronisieren:

<div id="app"> 
    <wysiwyg :html="value"></wysiwyg> 
    <editor v-model="value"></editor> 
</div> 

new Vue({ 
    el: '#app', 
    data: { 
    value: '<b>Hello World</b>' 
    } 
}) 

Nun, wenn der Editor ändert es das Ereignis sendet an die Eltern zurück, die value und wiederum Feuer aktualisiert, die in der wysıwyg ändern Fenster. Hier ist die ganze Sache in Aktion: https://jsfiddle.net/Lnpmbpcr/