VueJS動態模型綁定

Question

我們目前正在考慮在我們的最新項目中使用VueJs 2.0，但是我們在相當早的時候就碰到了一堵牆，我們希望有一個簡單的解決方案！

因此，我們正在使用Laravel生成超過150個表單域，我們希望將這些參數綁定到Vue。目前，採用了棱角分明1.4，我們只是ng-model="form.data.field"並創建一個漂亮的大對象發送給後端處理...

這似乎與Vue公司，你必須在data PARAM中明確定義的一切，我們有試圖定義的對象，例如：

data:{ 
    form: {} 
} 

然後適用於v-model="form.item"但v-model="form.item.item2"錯誤。

是否有可能在VueJS中複製它？

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

Answer 1

我有一個項目在做類似的事情。它有幾個核心領域，但用戶可以添加自己的領域，所有這些都是動態渲染。我們將字段以json的形式存儲在一個section_schema表中，並且有4列：| id | section_name | schema |禁用

模式包含我們需要呈現動態表單的任何內容。我們核心數據的某些特定格式有點笨重，但效果很好。我忽略了我們在後端做的準備，因爲我不想讓這個過長。這裏有最基礎的：

基本JSON在section_schema：

{ 
    "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 

在VUE組件

：

<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) => { 
       ... 
      }); 
     }, 
}