微信小程序开发教程(5)-小程序的表单提交

小程序中表单和vue的表单提交的方式比较相似。但是我在设置参数值的时候，个人感觉非常麻烦.

比如，在vue中，我们申请参数postitem

postitem: {
  game_id: '', //游戏ID
  ltv: '', //ltv范围     
}

赋值的时候，仅仅普通赋值就可以了

 this.postitem.game_id=‘5’

但是在小程序中，想要设置game_id的值，就比较麻烦了。因为postitem是一个json对象，如果要设置json对象属性的值，就必须提前申明，把属性作为一个变量， 如

let test = 'postitem.game_id';
this.setData({
    [test]: '5' 
})

如果需要设置多个属性的值，就感觉有点坑爹了，每一个属性都需要提前定义变量，确实很累赘、 你或许认为 this.data.postitem.game_id=‘5’是可以赋值的， 但是这样赋值后，data中的值并未发生改变，在wxml中看到的值是未被赋值的值。这结果后续可能引发意想不到的问题。

其次就是input提交值的问题。 在api上我们看到form用法: 当点击 表单中 formType 为 submit 的 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。 所以需要在input上写name， name为我们提交的参数

<form bindsubmit="changePwd">
    <input class="text-input" password value="{{passcode1}}" name="passcode1" bindinput="samepwd" minlength="6" maxlength="18" adjust-position="{{false}}" placeholder="输入新密码" />
    <button formType="submit" class="sure-btn {{ subable? 'disable': '' }}" disabled="{{subable}}">确认</button>
</form>

微信扫码体验