Vueの入力を無効にする

Question

ユーザが入力ボックスで入力を開始するときに値を指定して関数を呼びたいと思います。私は2つのアプローチを試みました。

最初のアプローチは、モデルへの双方向バインディングを使用することです。しかし、ドキュメンテーションに従った後、私はエラーになります。ここで

は、公式ドキュメントからの例です：

<div id="app-6"> 
    <p>{{ message }}</p> 
    <input v-model="message"> 
</div> 


var app6 = new Vue({ 
    el: '#app-6', 
    data: { 
    message: 'Hello Vue!' 
    } 
}) 

そしてここでは、私の例です：

<template lang="html"> 
    <input 
    type="text" 
    v-model="handle" 
    /> 
</template> 


<script>  
    export default { 
    data: { 
     handle: 'model', 
    } 
    }; 
</script> 

私はので、私はVueのインスタンスを再作成しないことを選択したアプリケーションの一部としてこれを書いています私はそれを他の場所で宣言しました。しかし、私はこのエラーが発生します：

Property or method "handle" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

私が試みた2番目のアプローチは、イベントハンドラを介してビューから直接関数を呼び出すことです。私はReactから来ているので、これは私の好ましいアプローチです。しかし、この関数は入力値として定義されていないので、入力の値を取り上げていません。

<template lang="html"> 
    <input 
    type="text" 
    v-on:keyup="handleInput()" 
    /> 
</template> 

<script> 
    export default { 
    methods: { 
     handleInput(input) { 
     // input -> undefined 
     }, 
    }, 
    }; 
</script> 

私は実際にはどちらの理由もわかりません。入力リスナーの予想される動作が値を渡すことではないでしょうか？

どこが間違っていますか？

How to fire an event when v-model changes ? (vue js)のようにする必要があるようです。私が理解していないのは、vモデルを割り当てたときにウォッチャーを手動で取り付けなければならない理由です。それはvモデルがやるべきことではありませんか？

<template lang="html"> 
    <input 
    type="text" 
    v-model="searchTerm" 
    @keyup.enter="handleInput" 
    /> 
</template> 


<script> 
    export default { 
    data() { 
     return { searchTerm: '' } 
    }, 
    methods: { 
     handleInput(event) {/* handle input */}, 
    }, 
    }; 
</script> 

Answer 1

がdataがあなたの最初の例に機能すべきではない。最終的に働いた何

が、これはでしたか？私はこれがvueコンポーネントのために働く方法だと思います。

<script>  
    export default { 
    data: function() { 
     return { handle: 'model' } 
    } 
    }; 
</script> 

私はこれがvuecasts.comのどこかで説明されたと思いますが、間違っている可能性があります。 :)