Javascript 绑定动态生成的窗体的属性

如何绑定动态生成的表单的属性

<div class="form-group" v-for="col in colInfo">

    <template v-if="col.Type == 'text'">
       <label class="badge badge-info">{{col.Field}}</label>
       <textarea class="form-control form-control-md" rows="3" v-on:change="updateInsertMap(col.Field)"></textarea>
    </template>

    <template v-else>
       <label class="badge badge-info">{{col.Field}}</label>
       <input type="text" class="form-control form-control-md" v:on:change="updateInsertMap(col.Field)">
    </template>

</div>

{{col.Field}}
{{col.Field}}

---

单击submit按钮时，我需要在将其发送到服务器之前获取所有值。我怎样才能跟踪这些值呢？

我想出来了！实际上有一个聪明的方法来实现这一点

我们需要定义一个将是空

对象的数据属性。所以关键是要将这个对象绑定到表单。对象中的键可以是
id
、
name
或任何有助于识别的键，该值将自动成为字段的值

以下是一个例子：

<template v-if="table.length > 0 && colInfo.length > 0">

 <div class="form-group" v-for="col in colInfo">
    <template v-if="col.Type == 'text'">
        <label class="badge badge-info">{{col.Field}}</label>
        <textarea class="form-control form-control-md" rows="3" v-model="insertMap[col.Field]"></textarea>
    </template>
    <template v-else>
        <label class="badge badge-info">{{col.Field}}</label>
        <input type="text" class="form-control form-control-md" v-model="insertMap[col.Field]">
    </template>
 </div>

</template>


{{col.Field}}
{{col.Field}}

在上面的示例中，
insertMap
是作为此表单的绑定属性的对象。希望这有帮助。
改用
v-model


const-app=新的Vue({
el:“#应用程序”，
数据：{
共信息：[
{Type:'input'，Field:'First Name'，Value:'John'}，
{Type:'input'，Field:'Last Name'，Value:'Doe'}，
{类型：'text'，字段：'Comment'，值：'3141592653589793238462643383279502'}
],
dataToBeSent:未定义
},
方法：{
提交（）{
this.dataToBeSent=this.colInfo.map（（col）=>col.Value）
}
}
});

{{col.Field}}
{{col.Field}}
提交
共信息
{{colInfo}}
提交的项目
{{dataToBeSent}
updateInsertMap
做什么？