小程序元素值双向绑定问题

官方给出的文档似乎并不好用

双向绑定语法

在 WXML 中，普通的属性的绑定是单向的。例如：

<input value="{{value}}" />

如果使用 this.setData({ value: 'leaf' }) 来更新 value ，this.data.value 和输入框的中显示的值都会被更新为 leaf ；但如果用户修改了输入框里的值，却不会同时改变 this.data.value 。

如果需要在用户输入的同时改变 this.data.value ，需要借助简易双向绑定机制。此时，可以在对应项目之前加入 model: 前缀：

<input model:value="{{value}}" />

这样，如果输入框的值被改变了， this.data.value 也会同时改变。同时， WXML 中所有绑定了 value 的位置也会被一同更新， 数据监听器 也会被正常触发。

 

在开发过程并没有实现像vue那样效果，那么怎么提交表单呢

<view class="content-box bred">
  <form bindsubmit='postPost'>
    <view><input class="bred input-text" name="subject" auto-focus placeholder="帖子标题"/></view>
    <view><textarea name="message" class="input-textarea mtop20" placeholder="详细内容" maxlength="500"/></view>
    <view class="bred media-box">上传图片</view>
    
    <view><button type="primary" form-type='submit'> 发布 </button></view>
  </form>
</view>

 

postPost: function (event) {
    let _this = this;
    _this.setData({ 
      subject: event.detail.value.subject,
      message: event.detail.value.message 
    });
    if(_this.data.subject=='') {
      _this.showToast('标题不可为空哦！');return;
    }
    if(_this.data.message.length < 2) {
      _this.showToast('内容不低于2个字哦'); return;
    }
})

就是这样在form中绑定bindsubmit 并且提交按钮form-type="submit"，就可以提交了