Vue JSカスタムコンポーネントv-model

Question

こんにちは皆私は作成したカスタムコンポーネントで動作するようにv-modelを取得しようとすると少し問題があります。問題は、このコンポーネントが2つの入力で構成され、これらが変更されるたびに私は"input"イベントを発行し、それを親にある配列にバインドすることです。コンポーネント自体はその後

<key-value-input v-for="n in inputs" v-model="provider.params"></key-value-input> 

...これはちょっと問題を作品

 updateData() { 
      this.$emit('input', { 
       key: this.inputData.key, 
       value: this.inputData.value 
      }) 
     } 

は、それが唯一のいくつかの1つを含むオブジェクトに元空の配列からprovider.paramsを置き換えることですこのコンポーネントは実行時に複製することができるので、キーと値の組み合わせがある可能性があります。

問題は、どうすればvモード私は各サブコンポーネントからデータをフェッチし、それを単に親の配列のオブジェクトとして設定できますか？

Answer 1

私が正しくあなたを理解していれば、あなたは単に配列要素自体にv-modelを使用することができます。

<key-value-input v-for="n in inputs" v-model="provider.params[n-1]"></key-value-input> 

はここJSFiddleです：https://jsfiddle.net/2be4maxm/