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

业务场景：一串一组表单在微信小程序中由后端获取的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.js
Page({

  /**
   * 页面的初始数据
   */
  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() {}
})