レンダリング機能を使用したVモデルの実装は無効です

Question

入力とテキストエリアのタグの間で互換性のある動的入力コンポーネントを作成しようとしています。私はレンダリング機能を使用してこれを実装しようとしています。 （https://vuejs.org/v2/guide/render-function.html#v-model）。

私が持っている問題は、データプロパティを直接変更するとv-modelが片方向にしか働かないことです。しかし、テキストエリアに新しいデータを変更または入力するとデータプロパティを更新しません。誰もそれを両方の方法で動作させる方法を知っていますか？ここ は、それが問題を示して怒鳴るコードペンのための私のコードのリンクは次のとおりです。

const tag = Vue.component('dynamic-tag', { 
    name: 'dynamic-tag', 
    render(createElement) { 
     return createElement(
      this.tag, 
      { 
       domProps: { 
        value: this.value 
       }, 
       on: { 
        input: event => { 
         this.value = event.target.value 
        } 
       } 
      }, 
      this.$slots.default 
     ) 
    }, 
    props: { 
     tag: { 
      type: String, 
      required: true 
     } 
    } 
}) 

const app = new Vue({ 
    el: '#app', 
    data: { 
    message: '' 
    }, 
    components: {tag} 
}) 

http://codepen.io/asolopovas/pen/OpWVxa?editors=1011

Answer 1

への更なる説明を残すだろう。

on: { 
    input: event => { 
     this.value = event.target.value 
     this.$emit('input', event.target.value) 
    } 
} 

Answer 2

問題は、カスタム・コンポーネントで使用するVモデルを使用していることです。 コンポーネントv-model="message"を使用してだから、カスタムコンポーネントで使用するVモデルを使用する

v-bind:value="message" 
v-on:input="value => { message = value }" 

のためだけの構文糖である、あなたのコンポーネントがvalue小道具を持っており、変更された値で入力イベントを発する必要があります。

私はあなたがあなたの入力から$emit変化に必要documentation