2015-12-13 10 views
10

私はv-forを通して生成されたフォームを持っています。v-for内の計算/動的vモデル名

注:私はブレードをエスケープするために "@"を使用しています。

マイVUEのisstanceがあります

<template v-for="input in form.inputs"> 
    <div style="margin-bottom: 25px" class="input-group"> 
     <span class="input-group-addon"><i class="glyphicon [email protected]{{input.icon}}"></i></span> 
     <input id="[email protected]{{input.name}}" v-model="?????" type="@{{input.type}}" class="form-control" name="@{{input.name}}" placeholder="@{{input.placeholder}}"> 
    </div> 
</template> 

が、私は、それぞれの請負業者のプロパティに各入力をバインドしたい:

data: { 
    form: { 
     inputs: [{icon: "", name="", placeholder: "", type="", value=""}] 
    }, 
    owner: {first_name: "", last_name: "", cell_phone: "", email: ""} 
} 

私が持つフォームを生成します。ですから、私はvモデルの値をowner.first_name、owner.last_name、owner.cell_phone、およびownerにします。 Eメール。私は私が行うことができます願っていた。

v-model="'owner' + @{{input.name}}" 

しかし、私は得る:

[Vue warn]: v-model="'owner' + {{input.name}}": attribute interpolation is not allowed in Vue.js directives and special attributes. 
vue.js:1956 Error: Warning Stack Trace 
    at warn (vue.js:1956) 
    at Directive.bind (vue.js:4507) 
    at Directive._bind (vue.js:8668) 
    at linkAndCapture (vue.js:7367) 
    at compositeLinkFn (vue.js:7345) 
    at new Fragment (vue.js:5373) 
    at FragmentFactory.create (vue.js:5575) 
    at Directive.create (vue.js:5844) 
    at Directive.diff (vue.js:5757) 
    at Directive.update (vue.js:5692) 

ownerプロパティは、各入力に対してinput.nameに対応しています。アプリの

おかげ

説明:私は複数のフォームを使用して、所有者を構築しようとしています。各フォームは、入力nとそのフォームのアクションを含むフォームオブジェクトを取得するajaxリクエストによって生成されます。

答えて

16

あなたはこの試みることができる:これは働いていた

v-model="owner[input.name]" 
+0

を!ありがとうございます! – Deciple