VueJS Dynamic Model Binding

Question

Wir sind gerade dabei, VueJs 2.0 für unser neuestes Projekt zu verwenden, aber wir sind schon ziemlich früh von einer Wand getroffen worden und wir hoffen, dass es eine einfache Lösung dafür gibt!

Also verwenden wir Laravel, um über 150 Formularfelder zu erzeugen, wir wollen diese Parameter an Vue binden. Derzeit Angular 1.4 verwenden, haben wir nur ng-model="form.data.field" und es ein schönes, großes Objekt erstellen, um das Backend für die Verarbeitung zu senden ...

Es mit Vue erscheinen würde, dass Sie alles definieren explizit im data param, haben wir versucht, ein Objekt zu definieren, wie zum Beispiel:

data:{ 
    form: {} 
} 

, die dann für v-model="form.item" aber v-model="form.item.item2" Fehler funktionieren.

Ist es möglich, dies in VueJS zu replizieren?

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

Answer 1

Ich habe ein Projekt tun etwas Ähnliches bekam. Es hat mehrere Kernfelder, aber Benutzer können ihre eigenen Felder hinzufügen, die alle dynamisch gerendert werden. Wir speichern die Felder als json in einer Tabelle section_schema mit 4 Spalten: | id | Abschnittsname | Schema | disable

Das Schema enthält alles, was wir benötigen, um die dynamische Form zu rendern. Einige der spezifischen Formatierungen für unsere Kerndaten werden etwas klobig, aber es funktioniert ziemlich gut. Ich übersprang die Vorbereitungen, die wir im Backend machen, weil ich nicht wollte, dass das zu lange dauerte. Hier sind die Grundlagen:

Grund json in 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 

in vue Komponente:

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

Edit: weitere Informationen

Unsere Daten:

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