微信小程式怎麼擷取動态建立的表單資料？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);
  },      

擷取全部的表單資料

<!--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>      

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