Question

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

因此我们使用Laravel生成超过150个表单字段，我们希望将这些参数绑定到Vue。目前，使用Angular 1.4，我们只有def readCSV_forNeo4j_Trump(path): with open(path + '/Trump/TrumpWorldData_Person-Org.csv', ncoding='utf8') as csvfile: reader = csv.DictReader(csvfile) for row in reader: Organization = row['Organization'] Person = row['Person'] Connection = row['Connection'] Person_Node = Node("Person", name=Person) graph.create(Person_Node) Org_Node = Node("Organization", name=Organization) graph.create(Org_Node) Person_Org = Relationship(Person_Node, Connection, Org_Node) graph.create(Person_Org)，它创建了一个很好的大对象，可以发送到后端进行处理......

在Vue中你必须在ng-model="form.data.field" param中明确定义所有内容，我们试图定义一个对象，例如：

data

然后适用于data:{ form: {} }但v-model="form.item"错误。

是否可以在VueJS中复制此内容？

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

Answer 1

我有一个项目做类似的事情。它有几个核心字段，但用户可以添加自己的字段，所有字段都是动态呈现的。我们将字段作为json存储在section_schema表中，其中包含4列：| id | section_name |架构|禁用

架构包含渲染动态表单所需的任何内容。我们的核心数据的一些特定格式变得有点笨重，但它运作良好。我跳过了我们在后端做的准备，因为我不想让它太长。以下是基础知识：

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

VueJS动态模型绑定

2 个答案: