微信小程序表单提交时数据双向绑定

需求是：在一个表单页，当我点击提交按钮时，我每次修改的内容都能够及时更新；

        因为原生小程序的数据是单项的，无法双向绑定，所以如果想要实现双向绑定数据的话，就得做相关的设置

        默认效果 

方法一、（通过 model:value 绑定）

当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key

wxml：

<view class="question-container">
  <form catchsubmit="formSubmit">
  <view class="questionItemInfo">
    <view class="page__bd">
      <view class="weui-cells demo_badge_cells">
        <view aria-labelledby="b1_txt1" aria-describedby="b1_n1" class="weui-cell weui-cell_active" aria-role="option">
          <view class="weui-cell__hd">
            点位类型
          </view>
          <view class="weui-cell__bd">
            <text>主次干道</text>
          </view>
        </view>
        <view aria-labelledby="b1_txt1" aria-describedby="b1_n1" class="weui-cell weui-cell_active" aria-role="option">
          <view class="weui-cell__hd">
            任务名称
          </view>
          <view class="weui-cell__bd">
            <text>随机</text>
          </view>
        </view>
        <view aria-labelledby="b1_txt1" aria-describedby="b1_n1" class="weui-cell weui-cell_active" aria-role="option">
          <view class="weui-cell__hd">
            点位名称
          </view>
          <view class="weui-cell__bd">
            <input name="addersTitle" model:value="{{addersInfo.addersTitle}}" type="text" placeholder="请输入地址" />
          </view>
        </view>
        <view aria-labelledby="b1_txt1" aria-describedby="b1_n1" class="weui-cell weui-cell_active" aria-role="option">
          <view class="weui-cell__hd">
            地址
          </view>
          <view class="weui-cell__bd pr addersInfo">
            <textarea class="weui-textarea" name="addersText" placeholder="请选择地址" rows="3" model:value="{{addersInfo.addersText}}"></textarea>
            <i-icon class="addersIcon pa" type="coordinates" size="30" color="#1387e0" catchtap="getAddersInfo" />
          </view>
        </view>

      </view>
    </view>
  </view>
  <button formType="submit">提交</button>
  </form>

  
</view>

JS：

data: {
    addersInfo:{
      addersTitle:'腾讯集团',
      addersText:'广东省深圳市'
    }
  },
formSubmit(e){
    console.log('获取：',e)
  },

 方法一的效果：

 方法二、（通过 bindinput 方法）

首先用标签属性 data- 绑定 js 中的 data 参数，再通过 bandinput 事件获取 key 值，最后利用模板字符串赋值给 data 中的值

wxml：

<view class="question-container">
  <view class="questionItemInfo">
    <view class="page__bd">
      <view class="weui-cells demo_badge_cells">
        <view aria-labelledby="b1_txt1" aria-describedby="b1_n1" class="weui-cell weui-cell_active" aria-role="option">
          <view class="weui-cell__hd">
            点位类型
          </view>
          <view class="weui-cell__bd">
            <text>主次干道</text>
          </view>
        </view>
        <view aria-labelledby="b1_txt1" aria-describedby="b1_n1" class="weui-cell weui-cell_active" aria-role="option">
          <view class="weui-cell__hd">
            任务名称
          </view>
          <view class="weui-cell__bd">
            <text>随机</text>
          </view>
        </view>
        <view aria-labelledby="b1_txt1" aria-describedby="b1_n1" class="weui-cell weui-cell_active" aria-role="option">
          <view class="weui-cell__hd">
            点位名称
          </view>
          <view class="weui-cell__bd">
            <input name="addersTitle" data-gater="addersInfo.addersTitle" bindinput="inputFrame" model:value="{{ addersInfo.addersTitle }}" type="text" placeholder="请输入地址" />
          </view>
        </view>
        <view aria-labelledby="b1_txt1" aria-describedby="b1_n1" class="weui-cell weui-cell_active" aria-role="option">
          <view class="weui-cell__hd">
            地址
          </view>
          <view class="weui-cell__bd pr addersInfo">
            <textarea class="weui-textarea" data-gater="addersInfo.addersText" bindinput="inputFrame" placeholder="请选择地址" rows="3" model:value="{{addersInfo.addersText}}"></textarea>
            <i-icon class="addersIcon pa" type="coordinates" size="30" color="#1387e0" catchtap="getAddersInfo" />
          </view>
        </view>

      </view>
    </view>
  </view>
  <button bindtap="formSubmit">获取地址</button>

</view>

 JS：

Page({
  data: {
    addersInfo:{
      addersTitle:'腾讯集团',
      addersText:'广东省深圳市'
    }
  },
  onLoad(options) {

  },
  formSubmit(e){
    console.log('获取：',this.data.addersInfo)
  },
  // input事件(内容改变时触发)
  inputFrame(e) {
    this.setData({
      [`${e.currentTarget.dataset.gater}`]: e.detail.value
    })
    console.log(this.data.addersInfo);
  },

})

 方法二的效果：