The WeChat applet submits multiple input boxes in the form, and realizes two-way data binding through a bindinput method

Method:
First bind the input tag value="{ {字段名}}",
and then bind each input tag data-params="字段名".
At this time, you can get the field name bindinputin the method , and then get the field value.e.currentTarget.dataset.params
e.detail.value

Diagram:
insert image description here
insert image description here

code:

<view class="form-item">
  <view class="title">品名</view>
  <input class="content" value="{
     
     {baseInfo.goodsName}}" bindinput="bindKeyInput" data-params="goodsName" ></input>
 </view>
  <view class="form-item">
      <view class="title">规格</view>
      <input class="content" value="{
     
     {baseInfo.spec}}" bindinput="bindKeyInput" data-params="spec"></input>
  </view>
</view>
data: {
    
    
	baseInfo: {
    
    }
},

bindKeyInput(e){
    
    
      console.log('e', e)
      this.data.baseInfo[`${
      
      e.currentTarget.dataset.params}`] = e.detail.value
      this.setData({
    
    
        baseInfo: this.data.baseInfo
      })
      console.log(`baseInfo对象:`, this.data.baseInfo)
},

Reference article: WeChat applet input two-way data binding, to solve each input requires a bindinput method

Guess you like

Origin blog.csdn.net/guairena/article/details/127578637