VueJSコンポーネント入力同期

Question

コンポーネントのローカルスコープに双方向バインドする入力を持つコンポーネントを作成したいとします。

コンポーネントがない場合は、新しいVueインスタンスを作成してから、私が必要とする通りにdataを設定します。その後、v-modelを使用して、そのデータへの入力をバインドし、入力から操作できます。

しかし、同じコードをコンポーネントに変換すると、コンポーネントの入力がデータにバインドされることはありません。私は小道具、:data.sync、data属性を試してみましたが、何を試しても、コンポーネント内の入力は何もしません。

私はこれを説明するためにJSFiddleを作成しました：

https://fiddle.jshell.net/f0pdmLhy/2/

は何が起こるしたいことは下にちょうど非コンポーネントのバージョンと同様に、ERR変数への双方向バインドするコンポーネントで入力され、 。

これはどのようにして達成できますか？

基本的に、私はajaxデータでインスタンス化して入力を取り込むことができるコンポーネントを作成したいと考えています。入力によってデータが更新され、保存メソッドを使用してデータをサーバーに送信することができます。これはコンポーネントを使用して行うこともできますか？

Answer 1

だから、物事のカップルがあります。

• に使用していた外部リソースが何らかの方法で故障しました。私は jsfiddleデフォルトVueインスタンスを使用しています。
• コンポーネントを宣言するときは、データをオブジェクトとして定義するのではなく、オブジェクトを返す関数として定義する必要があります。ここで読む：ここhttps://vuejs.org/guide/components.html#Component-Option-Caveats

作業例：https://fiddle.jshell.net/by4csn1b/1/

Answer 2

はい、コンポーネントと、反応性は、単にインスタンスと同じように達成することができます。

コンポーネントを1つキャッチすると、dataはオブジェクトを返す関数である必要があります。

また、双方向バインディングを維持するには、v-modelを入力してください。

Vue.component('ii', { 
    template: '<span>{{err}}</span><input type="text" v-model="err"><hr>', 
    data: function() { 
    return { 
     err: 123 
    } 
    } 
}) 

フィドル：https://fiddle.jshell.net/f0pdmLhy/25/