微信小程序实现对象属性双向数据绑定

核心方法

写一个下面的js方法,名称可以任意取，用于绑定input输入

bindInput(e){
    // 表单双向数据绑定
    var that = this;
    var dataset = e.currentTarget.dataset;
    // data-开头的是自定义属性，可以通过dataset获取到，dataset是一个json对象
    var name = dataset.name;
    
    var value = e.detail.value;
    // 拼接对象属性名，用于为对象属性赋值
    var attributeName = 'applyFormObject.' + name
    that.data[name] = value;
    that.setData({
      [attributeName]: that.data[name]
    });
    // console.log(that.data[name])
  },

其中需要更改的地方只有applyFormObject,这是一个在data中定义的对象 

Page({
  data: {
    applyFormObject: {
      name: '',
      phone: ''
    }
});

 

通过dataset获取到自定义的data-xxx属性值，该属性值就是input绑定的属性名称，比如data-name="phone"就等同于<input type="text" name="phone