VueJS 동적 모델 바인딩

VueJS 동적 모델 바인딩

현재 최신 프로젝트에서 VueJs 2.0을 사용하려고 합니다만, 꽤 일찍부터 벽에 부딪혔기 때문에, 간단하게 해결할 수 있는 솔루션이 있으면 좋겠다고 생각하고 있습니다.

따라서 Laravel을 사용하여 150개 이상의 폼 필드를 생성하고 있으며 이러한 매개 변수를 Vue에 바인딩하려고 합니다.현재 Angular 1.4를 사용하여ng-model="form.data.field"처리를 위해 백엔드로 보낼 수 있는 멋진 큰 오브젝트가 생성됩니다.

Vue에서는 모든 것을 명시적으로 정의해야 합니다.dataparam은 다음과 같은 오브젝트를 정의하려고 했습니다.

data:{
  form: {}
}

이 방법은v-model="form.item"그렇지만v-model="form.item.item2"에러입니다.

VueJ에서 이를 복제할 수 있습니까?

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

나도 비슷한 일을 하는 프로젝트가 있어.여러 개의 핵심 필드가 있지만 사용자는 자신의 필드에 추가할 수 있으며, 이러한 필드는 모두 동적으로 렌더링됩니다.의 필드는 section_disable 테이블에 json으로 저장합니다.이 테이블에는 |id | scontio n_n ame | schema | disable 4개의 컬럼이 있습니다.

스키마에는 동적 형식을 렌더링하는 데 필요한 모든 항목이 포함되어 있습니다.핵심 데이터에 대한 특정 포맷 중 일부는 다소 엉성하지만 상당히 잘 작동합니다.너무 오래 걸리지 않기 때문에 백엔드에서 하는 준비는 생략했습니다.기본은 다음과 같습니다.

section_module의 기본 json:

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

동적 모델 바인딩을 원하는 경우 가장 간단한 방법은 다음과 같은 어레이를 사용하는 것입니다.

<input v-model="formFields[index]" />

그런 다음 계산된 속성을 사용하여 모든 양식 입력을 매핑합니다.

  computed: {
    aFormInputName: function() {
      return this.formFields[0].value
    },

그런 다음 다음과 같은 평가를 받게 됩니다.

formFields[0] === aFormInputName

여기서 올바른 방법을 추출할 수 있지만, 이것은 제가 개략적으로 설명한 것의 정확한 예가 아닙니다.

https://forum.vuejs.org/t/how-do-i-have-dynamic-v-model/18833

언급URL : https://stackoverflow.com/questions/42378437/vuejs-dynamic-model-binding