微信小程序怎麼獲取動態創建的表單數據？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() {}
})