コンポーネント内でvueモデルにデータを動的にバインドします。

Question

私はさまざまな種類の通貨に対してユーザーの入力を受け入れる簡単なフォームを作成しようとしています。ここで

がうまくいけば、私が何をしたいのか伝わる（壊れた）フィドルだ：私は私のルートVUEインスタンスにデータをバインドするために私の部品が欲しいが、私は私のVかはわからない https://jsfiddle.net/4erk8yLj/7/

-model文字列は許されます。それをチェックアウト：

Vue.component('conversion-row', { 
    props: ['currency', 'values'], 
    template: '<div>{{currency}}:</div><div><input v-model="values[currency]></div><', 
}); 

var vm = new Vue({ 
    el: "#app", 
    data: { 
    currencies: ['USD', 'BTC'], 
    values: { 
     'BTC': '', 
     'USD': '' 
    } 
    } 


}); 

テンプレート：

<div id="app"> 
    <li> 
    <conversion-row is li v-for="currency in currencies" v-bind:currency="currency"> 
    </conversion-row> 
    </li> 
</div> 

この問題を解決するための良い方法は何ですか？あなたが修正する必要があるかもしれません、物事の

Answer 1

カップル：

まず、dataプロパティはなく関数オブジェクトでなければなりません。これは、すべてのインスタンスは、データは、それが作成されるたびに再計算を取得することができ、次を参照してください。

var vm = new Vue({ 
    el: "#app", 
    data() { 
    return { 
     currencies: ['USD', 'BTC'], 
     values: { 
     'BTC': 'BTC Value', 
     'USD': 'USD Value', 
     }, 
    }; 
    } 
}); 

第二に、<conversion-row>はvaluesプロパティがバインドされていません。ここではあなたが何ができるかです：

<div id="app"> 
    <li v-for="currency in currencies"> 
    <conversion-row :currency="currency" :values="values"></conversion-row> 
    </li> 
</div> 

最後に、コンポーネントは常に1つのルート要素（ラッパー）を目指すべき、その後、あなたが望むよう内部に多くの子供たちのように巣をすることができます。しかも、代わりにv-modelを使用するには、次の手順を確認し、入力（一方向データバインディング）に値を渡すために適切な方法であるvalueをバインドすることができます。

Vue.component('conversion-row', { 
    props: ['currency', 'values'], 
    template: '<div>{{currency}}:<input type="text" :value="values[currency]"></div>' 
}); 

あなたはおそらく作ることができるより多くの改善がありますあなたがvaluesとcurrencyをconversion-rowに渡す必要がある場合、ここで考え直すのが好きですが、後ほど詳しく説明します。

はすべてのこと上記のコードの実行を行いますと、正しく実行、ここでの実施例は、（あなたのフォーク）です：

• https://jsfiddle.net/maciejsmolinski/mp8m0ben/1/

は、このヘルプをしていますか？

ないあなたがv-modelを使用しての面でを目指しているものを確認してください、しかし、ここに（あなたの例に基づいて）v-model作業の例です：

Vue.component('conversion-row', { 
    props: ['currency', 'values'], 
    template: '<div>{{currency}}:<input type="text" v-model="values[currency]"></div>' 
}); 

と、対応するテンプレート：

<div id="app"> 
    <p><strong>USD Value:</strong> {{ values.USD }}</p> 
    <p><strong>BTC Value:</strong> {{ values.BTC }}</p> 

    <br> 

    <li v-for="currency in currencies"> 
    <conversion-row :currency="currency" :values="values"></conversion-row> 
    </li> 
</div> 

次のURLにあります：

• https://jsfiddle.net/maciejsmolinski/0xng8v86/2/