VueJS Dynamic Model Binding

Question

В настоящее время мы изучаем использование VueJs 2.0 в нашем последнем проекте, однако мы довольно рано нанесли удар по стене, и мы надеемся, что это простое решение!

Таким образом, мы используем Laravel для создания более 150 полей формы, мы хотим связать эти параметры с Vue. В настоящее время, используя угловую 1.4, мы просто ng-model="form.data.field" и создать хороший большой объект для отправки бэкэнда для обработки ...

Казалось бы, с Vue, что вы должны определить все явно в data пар, у нас есть пытались определить объект, такой как:

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 | схема | disable

Схема содержит все, что нам нужно для визуализации динамической формы. Некоторое конкретное форматирование для наших основных данных становится немного неуклюжим, но оно работает очень хорошо. Я пропустил подготовку, которую мы делаем на бэкэнде, потому что я не хотел, чтобы это слишком долгое время. Вот основные:

основной 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 

в вю компонента:

<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: подробнее

Наши данные:

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