Javascript VueJS动态模型绑定

Javascript VueJS动态模型绑定,javascript,vuejs2,vue.js,Javascript,Vuejs2,Vue.js,我们目前正在考虑在我们的最新项目中使用VueJs 2.0,但是我们很早就遇到了一些问题,我们希望有一个简单的解决方案 因此,我们正在使用Laravel生成150多个表单字段,我们希望将这些参数绑定到Vue。目前,使用Angular 1.4,我们只有ng model=“form.data.field”,它创建了一个很好的大对象,可以发送到后端进行处理 在Vue中,您似乎必须在数据参数中明确定义所有内容,我们已尝试定义一个对象,例如: data:{ form: {} } 然后它适用于v-mod

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

因此,我们正在使用Laravel生成150多个表单字段,我们希望将这些参数绑定到Vue。目前,使用Angular 1.4,我们只有
ng model=“form.data.field”
,它创建了一个很好的大对象,可以发送到后端进行处理

在Vue中,您似乎必须在
数据
参数中明确定义所有内容,我们已尝试定义一个对象,例如:

data:{
  form: {}
}
然后它适用于
v-model=“form.item”
v-model=“form.item.item2”
错误

是否可以在VueJS中复制此功能


我有一个类似的项目。它有几个核心字段,但用户可以添加自己的字段,所有字段都是动态呈现的。我们将字段作为json存储在具有4列的section_schema表中:|id | section_name | schema | disable

模式包含呈现动态表单所需的任何内容。我们的核心数据的一些特定格式有点笨拙,但它工作得相当好。我跳过了后端的准备工作,因为我不想让时间太长。以下是基本内容:

第_节模式中的基本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> 

很难说,因为我不知道您的数据是什么结构,也不知道您从API发送的字段是什么形式。但让我们想象一下,您从API获取数据,并且您当然会动态地将它们存储到数据对象模型中。然后您可以从数组中的响应中迭代每个对象,并为每个值输入字段动态地分配模型-请看这里,希望我能很好地理解您的问题,如果不是sorryHi,谢谢您的回答-您的回答很好,尽管它使用VueJS渲染所有表单元素。不幸的是,出于安全和延迟原因,所有字段生成都必须通过Laravel.hmm.中的刀片模板完成。。我在v-model=“form.item.item2”上看不到任何错误,但这定义了Vue实例中的所有数据,我正试图避免这些错误,因为数据集中需要嵌套级别。就是我们在后端生成模式后的情况,类似于此。被接受为答案,即使我们不喜欢它!:)哈哈。如果你找到更好的,请记住我,我想看看。
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) => {
               ...
            });
        },
}