E企盈营销工具技术服务商 热线:4006-838-530

微信小程序怎么获取动态创建的表单数据?VUE怎么获取动态创建的表单数据

E企盈直播平台营销卖货系统

业务场景:一串一组表单在微信小程序中由后端获取的json数据循环遍历生成的,我们填好表单后要给后端在传回去。我们假设这段json是由后端传给我们在前端的遍历的    GoodArr: [      {name:”名称一”},      {name:”名称二”},      {name:”名称三”},      {name:”名称四”}    ] // 商品列表我们在微信小程序中遍历生成表单<view class=”page-body”>  <view class=”page-section”>    <view wx:for=”{{GoodArr}}” wx:for-item=”goods” wx:key=”index” class=”weui-cells weui-cells_after-title margintop”>      <view class=”weui-cell weui-cell_input”>        <view>名称</view>        <input value='{{goods.name}}’ data-index=”{{index}}” bindinput=”nameBtn” class=”weui-input ipt” maxlength=”10″ placeholder=”请输入名称” />        <view>数量</view>        <input value='{{goods.count}}’ data-index=”{{index}}” bindinput=’countBtn’ class=”weui-input ipt” maxlength=”10″ placeholder=”请输入数量” />      </view>      <view class=”weui-cell weui-cell_input”>        <view>物流服务</view>        <checkbox-group name=”checkbox” data-index=”{{index}}” bindchange=”checkboxChange”>          <label>            <checkbox value=”1″/>配送</label>          <label>            <checkbox value=”2″/>代收</label>        </checkbox-group>      </view>    </view>  </view>  <view class=”button-sp-area”>    <button catchtap=’submitBtn’>提交</button>  </view></view>我们要在表单上添加自定义属性data-index,这个是添加循环的表单索引我们可以获取到e的下面具备索引和value,    let dataset = e.currentTarget.dataset;  // 获取索引    let value = e.detail.value; // 获取checkbox选中的数组我们看到原本后端传给我我们的数据只有name,但是我们回传给服务端的数据要有【数量】和【物流服务】;所以我们要改造原来的数组添加一下我们需要的属性,这个也根据服务端要求我们定的字段定  /**   * 生命周期函数–监听页面加载   */  onLoad: function(options) {    var arr = this.data.GoodArr; // 创建一个数组    for (var i = 0; i < this.data.GoodArr.length;i++){      arr[i].name = this.data.GoodArr[i].name;      arr[i].count = 0; // 添加数量属性count      arr[i].checkedArr = []; // 添加物流服务数组checkedArr    }    this.setData({ // 将新数组赋值给原来的数组,这样GoodArr里面对象就有了count和checkedArr      GoodArr: arr    });    console.log(this.data.GoodArr);  },设置复选框双向数据绑定  checkboxChange:function(e){ // 复选框    console.log(e);    let dataset = e.currentTarget.dataset;  // 获取索引    let value = e.detail.value; // 获取checkbox选中的数组    let arr = this.data.GoodArr;     // console.log(dataset);    arr[dataset.index].checkedArr = value;    this.setData({      checkedArr: arr    })    // console.log(this.data.GoodArr);  },设置input双向数据绑定  countBtn:function(e){ // 获取数量    let dataset = e.currentTarget.dataset; // 获取索引    let value = e.detail.value; // 获取value    console.log(dataset);    console.log(value);    let arr = this.data.GoodArr;     arr[dataset.index].count = value;    console.log(this.data.GoodArr);  },获取全部的表单数据 以下贴上全部WXML和JS代码<!–page/test/test.wxml–><text>订单列表</text><view class=”page-body”>  <view class=”page-section”>    <view wx:for=”{{GoodArr}}” wx:for-item=”goods” wx:key=”index” class=”weui-cells weui-cells_after-title margintop”>      <view class=”weui-cell weui-cell_input”>        <view>名称</view>        <input value='{{goods.name}}’ data-index=”{{index}}” bindinput=”nameBtn” class=”weui-input ipt” maxlength=”10″ placeholder=”请输入名称” />        <view>数量</view>        <input value='{{goods.count}}’ data-index=”{{index}}” bindinput=’countBtn’ class=”weui-input ipt” maxlength=”10″ placeholder=”请输入数量” />      </view>      <view class=”weui-cell weui-cell_input”>        <view>物流服务</view>        <checkbox-group name=”checkbox” data-index=”{{index}}” bindchange=”checkboxChange”>          <label>            <checkbox value=”1″/>配送</label>          <label>            <checkbox value=”2″/>代收</label>        </checkbox-group>      </view>    </view>  </view>  <view class=”button-sp-area”>    <button catchtap=’submitBtn’>提交</button>  </view></view>JS代码// page/test/test.jsPage({  /**   * 页面的初始数据   */  data: {    GoodArr: [      {name:”名称一”},      {name:”名称二”},      {name:”名称三”},      {name:”名称四”}    ] // 商品列表  },  submitBtn:function(e){ // 提交按钮    console.log(this.data.GoodArr); // 获取全部的表单数据 ,并发请求提交到服务端  },  checkboxChange:function(e){ // 复选框    console.log(e);    let dataset = e.currentTarget.dataset;  // 获取索引    let value = e.detail.value; // 获取checkbox选中的数组    let arr = this.data.GoodArr;     // console.log(dataset);    arr[dataset.index].checkedArr = value;    this.setData({      checkedArr: arr    })    // console.log(this.data.GoodArr);  },  countBtn:function(e){ // 获取数量    let dataset = e.currentTarget.dataset; // 获取索引    let value = e.detail.value; // 获取value    console.log(dataset);    console.log(value);    let arr = this.data.GoodArr;     arr[dataset.index].count = value;    console.log(this.data.GoodArr);  },  nameBtn:function(e){    let dataset = e.currentTarget.dataset; // 获取索引    let value = e.detail.value; // 获取value    let arr = this.data.GoodArr;    arr[dataset.index].name = value;    console.log(this.data.GoodArr);  },  /**   * 生命周期函数–监听页面加载   */  onLoad: function(options) {    var arr = this.data.GoodArr;    for (var i = 0; i < this.data.GoodArr.length;i++){      arr[i].name = this.data.GoodArr[i].name;      arr[i].count = 0;      arr[i].checkedArr = [];    }    this.setData({      GoodArr: arr    });    console.log(this.data.GoodArr);  },  /**   * 生命周期函数–监听页面初次渲染完成   */  onReady: function() {},  /**   * 生命周期函数–监听页面显示   */  onShow: function() {},  /**   * 生命周期函数–监听页面隐藏   */  onHide: function() {},  /**   * 生命周期函数–监听页面卸载   */  onUnload: function() {},  /**   * 页面相关事件处理函数–监听用户下拉动作   */  onPullDownRefresh: function() {},  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function() {},  /**   * 用户点击右上角分享   */  onShareAppMessage: function() {}}) 微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序怎么获取动态创建的表单数据?VUE怎么获取动态创建的表单数据
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏