VueJS Dynamic Model Binding

Question

現在、VueJs 2.0を最新のプロジェクトで使用していますが、かなり早い時期に少し壁を打ってしまいました。

私たちは150以上のフォームフィールドを生成するためにLaravelを使用していますので、これらのパラメータをVueにバインドします。現在、角度1.4を使用しているだけでng-model="form.data.field"があり、処理のためにバックエンドに送信する素晴らしい大きなオブジェクトを作成します...

dataパラメータ内ですべてを明示的に定義する必要があります。次いでv-model="form.item"しかしv-model="form.item.item2"エラーのために働く

data:{ 
    form: {} 
} 

次のようなオブジェクトを定義しようとしました。

VueJSでこれを複製することはできますか？

http://jsbin.com/jafetucuna/edit?html,js,console,output

Answer 1

私は似た何かをやってプロジェクトを持っています。いくつかのコアフィールドがありますが、ユーザーは独自のフィールドを追加できます。これらのフィールドはすべて動的にレンダリングされます。フィールドを4つの列を持つsection_schemaテーブルにjsonとして格納します：| id |セクション名|スキーマ|無効

スキーマには、動的フォームをレンダリングするために必要なものがすべて含まれています。私たちのコアデータのための特定の書式設定のいくつかはちょっと面倒ですが、かなりうまく動作します。私はこれが長すぎるようにはしたくなかったので、バックエンドで行う準備をスキップしました。ここでは基本的には、以下のとおりです。section_schemaで

基本的なJSON：

VUEコンポーネントで

{ 
    "Company Name":{ 
     "cols":"8", 
     "field_name": "company_name", 
     "type":"string", 
     "order":"0", 
     "required":"1" 
    }, 
    "Member Type":{ 
     "cols":"4", 
     "field_name": "member_type", 
     "type":"dropdown_fromdata", 
     "order":"1", 
     "required":"1", 
     "dropdown":{"table" : "membershipType", "field": "name"} 
    }, 
    "Website":{ 
     "cols":"4", 
     "field_name": "company_website", 
     "type":"string", 
     "order":"2", 
     "required":"0" 
    }, 
    ... others 

：

<div class="col-sm-6" v-for="v in dataType"> 
    <div class="white-box"> 
    <h3 class="box-title">{{v.section_name}}</h3> 
     <form class="form-material form-horizontal m-t-30" :id="v.section_id"> 
      <input type="hidden" :value="v.section_id" id="type" name="type"> 
       <div class="form-group" v-for="i in v.field_data"> 
        <label class="col-md-12" :for="i.id">{{i.name}}</span></label> 
         <div class="col-md-12"> 
         <select v-if="i.id === 'company_info-member_type'" class="form-control" style="width: 100%;" size="1" :value="i.value" :id="i.id" :name="i.id"> 
          <option value="" selected disabled>Please select</option> 
          <option v-for="mt in membershipTypes" :value="mt.name">{{mt.name}}</option> 
         </select> 
         <select v-else-if="i.id === 'company_info_status'" class="form-control" style="width: 100%;" size="1" :value="i.value" :id="i.id" :name="i.id"> 
          <option value="" selected disabled>Please select</option> 
          <option v-for="status in statuses" :value="status.name">{{status.name}}</option> 
         </select> 
         <datepicker v-else-if="i.id === 'company_info-anniversary'" :format="format" :value="setDate(i.value)" :id="i.id" :name="i.id"></datepicker> 
         <input v-else-if="i.type == 'phone'" :type="i.type" :id="i.id" :name="i.id" class="form-control" :placeholder="i.name" :value="i.value" data-mask="(999) 999-9999"> 
         <input v-else :type="i.type" :id="i.id" :name="i.id" class="form-control" :placeholder="i.name" :value="i.value"> 
         </div> 
       </div> 

     <button @click.prevent="saveMemberChanges(v.section_id)" class="btn btn-info waves-effect waves-light m-r-10">Submit</button> 
    </form> 
    </div> 
</div> 

編集：詳細

我々のデータ：

data() { 
     return { 
      dataType: [], 
     } 
}, 
methods: { 
     getDataTypes: function(){ 
      var id = this.member.id 

      this.$http.get('/member/details/json/'+id).then((response) => { 
       var data = response.data 
       this.dataType = data 
      }, (response) => { 
       ... 
      }); 
     }, 
}