vuejsでレンダリングされない小道具の値

Question

Laravel 5.3アプリケーションのvuejsにajaxフォームコンポーネントを作成しようとしています。しかし、私は、フォームフィールドの表示にこだわっていると思います。誰か助けてくれますか？

フォームをレンダリングするためのフロントエンド：

<ajax-form 
    :autocomplete=false 
    :schema="[{ 
     label: 'Username:', 
     type: 'text', 
     id: 'username', 
     name: 'username', 
     placeholder: 'Eg. johndoe', 
     inputClass: 'input is-info', 
     model: 'username', 
     required: true, 
    }, { 
     label: 'Email:', 
     type: 'email', 
     id: 'email', 
     name: 'email', 
     placeholder: 'Eg. johndoe@example.com', 
     inputClass: 'input is-info', 
     model: 'email', 
     required: true, 
    }, { 
     label: 'Password', 
     type: 'password', 
     id: 'password', 
     name: 'password', 
     placeholder: 'Eg. password', 
     inputClass: 'input is-info', 
     model: 'password', 
     required: true, 
    }, { 
     label: 'Confirm Password', 
     type: 'password', 
     id: 'confirm_password', 
     name: 'confirm_password', 
     placeholder: 'Eg. password', 
     inputClass: 'input is-info', 
     model: 'confirm_password', 
     required: true, 
    }]" 
></ajax-form> 

そしてAjaxForm.vueファイルにtemplate：

<form method="POST"> 
    <div v-for="field in schema"> 
     <label class="label">{{ field.label }}</label> 
     <p class="control"> 
      <input 
       type="field.type" 
       name="field.name" 
       id="field.id" 
       class="field.inputClass" 
       placeholder="field.placeholder" 
       required="field.required" 
       v-model="field.model" 
      > 
     </p> 
    </div> 
</form> 

そしてscriptタグの内容：

<script> 
    export default { 
     props: { 
      autocomplete: Boolean, 
      schema: Array 
     } 
    } 
</script> 

問題は、フォームフィールドが正しく表示されないことです。画像を参照してください：

そして、何が欲しいです：

P.S：私はちょうどコンポーネントについて学び始めているので、これは愚かな間違いかもしれません。

Answer 1

あなたがループ内でリテラル値を設定している、あなたはv-bind:や速記:を使用する必要があります。

<input 
    :type="field.type" 
    :name="field.name" 
    :id="field.id" 
    :class="field.inputClass" 
    :placeholder="field.placeholder" 
    :required="field.required" 
    v-model="field.model" 
/> 

EDIT

あなたはv-modelそのようにバインドすることはできません、代わりにあなたがバインドする必要があります。それをデータに変換する。一番簡単な方法は、値配列を作成し、それをコンポーネントの作成したフックに設定することです。あなたは配列にオブジェクトをプッシュする必要がありますのでVueが、直接配列に結合しない：今

created() { 
    this.inputs.forEach((input) => { 
    // push new value object to array 
    this.values.push({value: input.value})  
    }); 
}, 
data() { 
    return { 
    values: [] 
    } 
} 

、あなたのv-forあなたはインデックスを持つ値にあなたの入力をバインドすることができます内側：

<div v-for="(input, index) in inputs"> 
    <input v-model="values[index].value" /> 
    </div> 

そして、ここで働いていJSFiddle：

https://jsfiddle.net/xsg91o04/