在微信小程序里当初始化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
})
}