在微信小程序里当初始化data里lk_info_list值并绑定表单循环时,当input里值改变时,data里绑定的值并不能像vue那样双向自动绑定,所以在提交表单时,取到的data里lk_info_list还是空的,需要在提交时进行数据设置。下面教大家怎么循环动态取input值并设置到data里。
模板源码
<view class="itemmmm" wx:for='{{lk_info_list}}' wx:key="{{index}}"> <view class="view-cell-bar"> <view class="hd">身份证</view> <view class="bd"><input class="input-text" name="idcard{{index}}" type="text" catchtap="dianji" value="{{item.idcard}}" id="{{index}}" bindblur="idCardBlur" placeholder="购买保险和积累积分" placeholder-style="color:#c8c8c8"></input></view> <view class="fd">(必填)</view> </view> <view class="view-cell-bar"> <view class="hd">昵称</view> <view class="bd"><input class="input-text" name="nickname{{index}}" type="text" value="{{item.nickname}}" placeholder="建议微信昵称" placeholder-style="color:#c8c8c8"></input></view> <view class="fd">(必填)</view> </view> <view class="view-cell-bar"> <view class="hd">手机号</view> <view class="bd"> <input class="input-text" type="text" name="mobile{{index}}" wx:if="{{mobile[index]}}" value="{{item.mobile}}" placeholder="接收活动通知" placeholder-style="color:#c8c8c8"></input> <input class="input-text" type="text" wx:else name="mobile{{index}}" value="{{item.mobile}}" placeholder="接收活动通知" placeholder-style="color:#c8c8c8"></input> </view> <view class="fd">(必填)</view> </view> <view class="view-cell-bar"> <view class="hd">真实姓名</view> <view class="bd"><input class="input-text" type="text" name="truename{{index}}" value="{{item.truename}}" placeholder="购买保险" placeholder-style="color:#c8c8c8"></input></view> <view class="fd">(必填)</view> </view> </view>
js代码:
Page({ /** * 页面的初始数据 */ data: { k_info_list: [{idcard: '', nickname:'', mobile:'', tourername:''}], }), btnOrderDone:function(e){ var lk_info_list = this.data.lk_info_list; let value = e.detail.value; for(let i=0;i<this.data.baomingNum;i++) { let idcard = "idcard"+i; let nickname = "nickname"+i; let mobile = "mobile"+i; let truename = "truename"+i; lk_info_list[i]={ idcard: value[idcard], nickname: value[nickname], mobile: value[mobile], truename: value[truename] } } this.setData({ lk_info_list: lk_info_list }) }