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

Dear 丶 2022-01-31 15:29 1179阅读 0赞

业务场景：一串一组表单在微信小程序中由后端获取的json数据循环遍历生成的，我们填好表单后要给后端在传回去。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70][]

我们假设这段json是由后端传给我们在前端的遍历的

GoodArr: [
          {name:"名称一"},
          {name:"名称二"},
          {name:"名称三"},
          {name:"名称四"}
        ] // 商品列表

我们在微信小程序中遍历生成表单

我们要在表单上添加自定义属性data-index，这个是添加循环的表单索引

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 1][]

我们可以获取到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);
      },

获取全部的表单数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 2][]

以下贴上全部WXML和JS代码

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70]: /images/20220131/45002bdf645349a98e3b1bd11630f999.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 1]: /images/20220131/e8406c3ea1b941c881870dac4a727bc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 2]: /images/20220131/931961db05da48f3862715d49da13260.png