vue动态生成及绑定表单对象

vue动态生成及绑定表单对象

有时候,我需要生成动态表单(即表达中的元素多少来自一个动态数组或者数据)

这里使用如v-for动态生成表单元素,同时使用绑定到json数组对象的方式进行动态绑定,例:

在data中定义对象:


model: {
salesPeople: '',
saleStore: '',
reportDate: '',
inventoryClass: [],
GySaleReportB: [{
saleAmount: "",
saleNum: ""
}]
}

这里主要是用到model对象中的GySaleReportB这个数组,我这边的例子,是该数组数据是有服务端接口获取数据,然后使用v-for动态生成表单并绑定:


<view v-for="(item,index) in model.GySaleReportB">
<u-form-item label-width="350" :label-position="labelPosition"
:label="(index+1)+'. '+model.GySaleReportB[index].inventoryName" prop="name" style="margin: 2rpx;padding: 6rpx;">
<u-input :border="border" placeholder="售卖单价" v-model="model.GySaleReportB[index].saleAmount"
type="number" style="font-weight: bold;" :disabled="inputDisabled"></u-input>
<u-input :border="border" placeholder="售卖数量" v-model="model.GySaleReportB[index].saleNum"
type="number" style="font-weight: bold;" :disabled="inputDisabled">
</u-input>
</u-form-item>
</view>

以上,在v-model绑定的时候,直接通过index绑定到GySaleReportB的某个对象,这样,在实际表单填写完成后,在回传model整个对象的时候,GySaleReportB的值也是动态收集了。

Snipaste_2021-07-29_09-07-06.png


以上销售商品列表,即动态生成的表单,同时动态绑定。


其他连接:Vue watch监听某个对象值的变化

qrcode