VueJs：Textarea input binding

Question

私は、コンポーネント内からテキストエリアの値の変化を検出する方法を理解しようとしています。

入力のために我々は単に

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

しかしテキストエリアに、これは動作しません使用することができます。

私が扱っているのは、（この子コンポーネントに接続されている）親コンポーネントのモデル値が更新されたときにwysiwygのコンテンツを更新するCKEditorコンポーネントです。

私Editorコンポーネントは、現在、次のようになります。

<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> 

と私は親コンポーネント

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

以内にそれを含めるただし、いつでも親コンポーネントのモデル値の変更 - それはウォッチャーをトリガしません - 効果的にエディタのウィンドウを更新しません。

親コンポーネントのモデルfields.bodyが更新された場合にのみ、update()メソッドを呼び出す必要があります。

私はそれにどのようにアプローチできますか？

Answer 1

解読するためのコードの公平なビットですが、私はどうなることはそう、二つの異なるコンポーネントにテキスト領域とWYSIWYG HTMLウィンドウを打破して、親が値を同期する必要があります：

のTextAreaをコンポーネント：

<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 
    } 
    } 
}); 

 

私はここでやっている戻ってそれが変化し、親への入力を放出しているすべての、私は、イベント名と0として入力を使用していますを小道具として使用して、v-modelをエディタで使用できます。今、私はコードを示すためにWYSIWYGウィンドウを必要とする：

WYSIWYGウィンドウ：そこに行くくらい

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

何も、それは単に小道具として渡されたHTMLをレンダリングします。

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

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

を今、エディタはそれがWYSIWYGに変更valueとでターン火災を更新し、親に戻ってイベントを発する変更したとき：

は最後に、私はただのコンポーネント間の値を同期する必要があります窓。 https://jsfiddle.net/Lnpmbpcr/