uniapp/小程序，@input @change @blur 等事件，需要傳額外參數的辦法。

寫在前面

經常在做表單的時候，會有多個相同的form-section(也就是需要提交的是一個格式相同的對象組成的數組).這個時候無論是input還是swtich或者picker,都會碰到一個問題，如何知道我當前的編輯的input是屬於數組中的第幾個對象，然後去修改對應對象的值（因爲表單是遍歷出來的是，所以綁定的函數肯定是同一個）。

主要場景如下

• 酒店機票套餐等，需要填寫多個用戶身份信息。
• 訂單確認頁面有多個商家（每個商家一個section,因爲後臺要分單），所以需要可以對每個子訂單的是否使用餘額、優惠券、積分抵扣，以及物流選項和發票信息，等進行維護
  

核心代碼

<switch :checked="postData.need_invoice[biz_id]" @change="faPiaoChange($event,biz_id)" color="#04B600" />

faPiaoChange (e,biz_id) {
  const open = e.detail.value
  if (open) {
    this.postData.need_invoice[biz_id] = 1
  } else {
    this.postData.need_invoice[biz_id] = 0
  }
}

額外提供一個不好的示例

<div @click="changeShip(biz_id)" class="o_title">
  <span>運費選擇</span>
  <span style="text-align:right; color: #888;" class="flex flex-vertical-c">
    <span>
      <block v-if="postData.shipping_name[biz_id]">
        {{postData.shipping_name[biz_id]}} {{(' ' + (orderInfo.Order_Shipping.Price > 0 ? '￥'+orderInfo.Order_Shipping.Price : '免運費'))}}
      </block>
      <block v-else>請選擇物流</block>
    </span>
    <layout-icon type="iconicon-arrow-right" class="right" color="#999"></layout-icon>
  </span>
</div>

//標記當前操作的下標
changeShip (biz_id) {
   this.activeBizId = biz_id
   this.ship_current = this.postData.shipping_id[biz_id]
}

//錯誤的用法
ShipRadioChange (e) {
  const val = e.detail.value
  this.ship_current = val
  this.postData.shipping_id[this.activeBizId] = val
  this.postData.shipping_name[this.activeBizId] = val === 'is_store' ? '到店自取' : this.popupExpressCompanys[val] // 也要設置下name
  // 更改物流，需要重新獲取信息，計算運費
  this.checkOrderParam()
},

總結

挺簡單的，百度一搜就有了。但是之前一直使用的是給form-item的外層標籤，加一個點擊事件，然後全局維護一個activeRowIdx，來保存當前操作的下標，然後在input等事件中利用下標去修改制定對象的屬性。但是這樣有明顯的缺點

1. 對於switch這樣的組件，會有延遲（也就是子組件的change事件觸發了，但是外層元素的點擊事件還沒冒泡到。。。所以這個時候activeRowIdx是空的）#親測，要解決只能把邏輯代碼寫在settimeout裏面等事件冒泡，這真是辣雞做法#
2. 多餘的代碼（每個form-item都需要申明事件）和變量（全局activeRowIdx）