关键词搜索

全站搜索
×
密码登录在这里
×
注册会员
×

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

微信小程序表单中循环多个input取每个inpu值

发布2021-04-06 浏览2194次

详情内容

在微信小程序里当初始化data里lk_info_list值并绑定表单循环时,当input里值改变时,data里绑定的值并不能像vue那样双向自动绑定,所以在提交表单时,取到的data里lk_info_list还是空的,需要在提交时进行数据设置。下面教大家怎么循环动态取input值并设置到data里。

image.png

模板源码

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


点击QQ咨询
开通会员
返回顶部
×
  • 微信支付
微信扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
确定支付下载