VueJS Dynamic Model Binding

Question

우리는 현재 최신 프로젝트에서 VueJs 2.0을 사용하고 있습니다. 그러나 우리는 아주 초기에 약간의 벽을 쳤습니다. 우리는 거기에 쉬운 해결책이 있기를 바라고 있습니다.

우리는 Laravel을 사용하여 150 개 이상의 양식 필드를 생성하므로이 매개 변수를 Vue에 바인딩하려고합니다. 현재 Angular 1.4를 사용하여 우리는 ng-model="form.data.field"을 가지고 있고 처리를 위해 백엔드에 보낼 멋진 큰 객체를 만듭니다 ...

data 매개 변수 내에서 모든 것을 명시 적으로 정의해야한다는 것이 Vue에 나타납니다. 다음 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_name | 스키마 | disable

스키마에는 동적 양식을 렌더링하는 데 필요한 모든 것이 포함되어 있습니다. 우리의 핵심 데이터를위한 특정 포맷팅은 약간 어색하지만 꽤 잘 작동합니다. 내가 너무 오래 걸리기를 원하지 않기 때문에 우리가 백 엔드에서하는 준비를 생략했습니다. 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) => { 
       ... 
      }); 
     }, 
}