Vue.js 2 - 成分

Question

にV字モデルIは、次の成分を有する：次のようにインスタンス化

Vue.component('test-component',{ 

    template: `<div> 
     {{value}} 
     <button on:click="updateValue();">update</button> 
    </div>`, 

    props: ['value'], 

    methods: { 
     updateValue(){ 
      this.$emit('input', this.value + "X"); 
     } 
    } 
}); 

、（データ変数「でtestValueに結合する）：

<test-component v-model="testValue"></test-component> 

コードでありますボタンをクリックするとバインドされた値の最後に「X」を追加することを意図していました。

私の意図は、たとえば、カスタムフォーム入力を作成するために、その囲みコンポーネント内のデータにバインドできる再利用可能なコンポーネントを作成することです。

これは動作しません - 発光は何もしないようです。私は間違って何をしていますか？ fiddle作業

template: `<div> 
    {{value}} 
    <button v-on:click="updateValue();">update</button> 
</div>`, 

：

Answer 1

あなたがボタンにVUEの方法をバインドします次の行にだけではなくonのv-onを使用する必要があります。