VueJS 动态模型绑定

Question

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

所以我们使用 Laravel 生成超过 150 个表单字段，我们希望将这些参数绑定到 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) => {
               ...
            });
        },
}

Answer 2

如果您想要动态模型绑定，最简单的方法可能是使用这样的数组数组：

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

然后使用计算属性映射每个表单输入

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

然后你会得到这样的评估结果为 true：

formFields[0] === aFormInputName

您可以在此处提取执行此操作的正确方法，但这并不是我所概述的示例。

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