微信小程式開發筆記之動態新增刪除input並獲取值轉成物件

要求動態新增刪除商品。

問題：

1.動態的新增view，wx:for可以實現。

2.view裡面有input元件，最終獲取值的時候要獲取所有input的值，需要一個數組存值。

3.動態刪除指定的已新增的view的內容。

思路：

1.wx:for迴圈view，新增一個，wx:for的內容就增加一個，因此就需要一個數組來進行迴圈。

2.input是迴圈出來的，所以不能給不同的input繫結不同的bindinput事件，所以只能繫結一個bindinput事件，所有的值是一個數組就需要獲取到input外層的view塊的索引，然後通過索引值來修改陣列中的值。

3.刪除跟新增類似，不同點是多了一個刪除input陣列的值的操作，只要可以獲取當前要刪除的索引值，就可以刪除對應的值。

先看實現的效果：

wxml：

<view class="cu-form-group">
    <view class="title">新增產品資訊</view>
    <input placeholder="(新增一條產品資訊)" disabled name="input"></input>
    <button class='cu-btn bg-green shadow' bindtap="additems" style="width: 70px;">新增			</button>
</view>

  <!-- 新增多個產品資訊 -->
  <view wx:for="{{ formitems }}" wx:key="index">
    <view class="cu-form-group">
      <view class="title">商品品牌</view>
      <input placeholder="輸入品牌"  value="{{brand[index]}}" bindinput="brandInput" data-index="{{ index }}"></input>
    </view>
    <view class="cu-form-group">
      <view class="title">商品型別</view>
      <input placeholder="輸入型別"  value="{{brandname[index]}}" bindinput="brandnameInput" data-index="{{ index }}"></input>
    </view>
    <view class="cu-form-group">
      <view class="title">商品段</view>
      <input placeholder="輸入商品段"  value="{{type[index]}}" bindinput="typeInput" data-index="{{ index }}"></input>
    </view>
    <view class="cu-form-group">
      <view class="title">購買數量</view>
      <input placeholder="輸入數量"  type="number" value="{{num[index]}}" bindinput="numInput" data-index="{{ index }}"></input>
    </view>
    <view class="cu-form-group">
      <button class='cu-btn bg-red shadow' style="width: 95%; height: 40px;" id="{{ index }}" bindtap="delme">刪除</button>
    </view>
  </view>
 

1.formitems是迴圈的陣列

2.刪除個input都需要新增data-index屬性，因為需要用到當前索引值。

js:

	/**
   * 頁面的初始資料
   */
  data: {
    formitems:[], // 迴圈陣列
    brand: [], // 商品品牌
    brandname: [], //商品型別
    type: [], // 商品段
    num: [], // 購買數量
  },
    
  // 新增
  additems(e){
    var formitems = this.data.formitems
    var newData = {id: formitems.length};  //這個用來動態新增id為對應表單個數的物件
    formitems.push(newData);  //給formitems新增1個物件
    console.log(formitems)
    this.setData({
      formitems: formitems, //動態渲染
    })
  },
  // 刪除
  delme(e){
    let delid = e.currentTarget.id; //動態獲取陣列下標（通過前端設id來實現）
    let formitems = this.data.formitems
    let brand = this.data.brand
    let brandname = this.data.brandname
    let type = this.data.type
    let num = this.data.num
    //從id對應下標值開始，刪除1個
    formitems.splice(delid, 1);
    brand.splice(delid,1);
    brandname.splice(delid,1);
    type.splice(delid,1);
    num.splice(delid,1);

    this.setData({
      formitems: formitems,  //動態渲染
      brand: brand,
      brandname: brandname,
      type: type,
      num: num
    })  
  },
  
  // 獲取商品品牌
  brandInput: function (e) {
    let index = e.target.dataset.index;
    let value = e.detail.value;
    this.data.brand[index] = value;
    this.setData({ brand: this.data.brand })
  },

  // 獲取商品型別
  brandnameInput: function (e) {
    let index = e.target.dataset.index;
    let value = e.detail.value;
    this.data.brandname[index] = value;
    this.setData({ brandname: this.data.brandname })
  },

  // 獲取商品段
  typeInput: function (e) {
    let index = e.target.dataset.index;
    let value = e.detail.value;
    this.data.type[index] = value;
    this.setData({ type: this.data.type })
  },

  // 獲取購買數量
  numInput: function (e) {
    let index = e.target.dataset.index;
    let value = e.detail.value;
    this.data.num[index] = value;
    this.setData({ num: this.data.num })
  },
  // 轉成物件
  transformation () {
    var products = []
    for (let i = 0; i < this.data.brand.length; i++) {
      products.push({'brand': this.data.brand[i], 'brandname': this.data.brandname[i], 'type': this.data.type[i], 'num': this.data.num[i]})
    }
  }
 

即使再小的帆也能遠航！