javascript - VueJS 动态模型绑定(bind)

Question

我们目前正在考虑在我们的最新项目中使用 VueJs 2.0，但是我们很早就遇到了一些困难，我们希望有一个简单的解决方案!

所以我们正在使用 Laravel 生成超过 150 个表单字段，我们想将这些参数绑定(bind)到 Vue。目前，使用 Angular 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 存储在具有 4 列的 section_schema 表中:|id |节名 |模式 |禁用

模式包含呈现动态表单所需的任何内容。我们核心数据的一些特定格式有点笨拙，但效果很好。我跳过了我们在后端做的准备工作，因为我不想让它变得太长。以下是基础知识:

section_schema 中的基本 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) => {
               ...
            });
        },
}