javascript - 绑定(bind)动态生成的表单的属性

Question

如何绑定(bind)动态生成的表单的属性？

<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>

单击提交按钮后，我需要在将其发送到服务器之前获取所有值。我如何跟踪值？

Answer 1

我想通了!实际上有一个聪明的方法可以实现这一点。

我们需要定义一个数据属性，它将是一个空的对象。所以重点是将这个对象绑定(bind)到表单。对象中的键可以是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>

在上面的示例中，insertMap 是作为此表单绑定(bind)属性的对象。希望这会有所帮助。