微信小程序this.setData给对象&数组动态赋值

固定属性赋值

wxml:

{{formData.title}}

 js:

data:{    formData:{        title:'hellow'    }}

这个时候页面上显示的是 hellow

当我们修改的时候有2种方案

// 方案一 整体赋值this.data.formData.title = 'china';this.setData({    form:'china'})// 方案二 单个属性赋值this.setData({   'form.title':'china'})或this.setData({   ['form.title']:'china'})

动态属性赋值

wxml:

{{item.title}}

js:

data:{    arr:[        {            id:1,            title:'标题一'        },        {            id:2,            title:'标题二'        }    ]}

修改数组里对象的属性

let index = 0;this.setData({    `[arr[${index}].title]`:'china'})或let name = this.data.arr[0].title;this.setData({    [name]:'china'})

通过es6模版字符串 `` 的方式 key 可以作为变量

wxml:

{{formData.a0}}{{formData.a1}}{{formData.a2}}

 js:

data:{    formData:{        a0:'111',        a1:'222',        a2:'333'    }}

循环修改

for(let i=0 ; i<2 ; i++){    let name = `a${i}`;    this.setData({        [name]:'c'+i    })}//显示结果a0:c0a1:c1a2:c2

双向数据绑定

提交

经过多次尝试提交 获取到的formData.title数据为空，据说加上model:value会生效，然而并没有任何效果，甚至一度怀疑人生，直到找到一篇帖子说 2.9.3以上版本才支持

wx.getSystemInfo({   success: function (res) {        console.log('该版本号为: ',res.SDKVersion)   }})

// 输出结果 该版本号为:  2.19.4

很显然不支持

网上搜索了一番，微信小程序居然没有双向数据绑定，如果想要动态改变 data 值需要用到 bindinput 方法拿到输入的值，再赋值给data，看到这里有点无语，既然找到了方法就写吧。

考虑到一个页面上可能存在多个input总不能每个都加一个bindinput方法吧，这样太鸡肋的，有没有办法写一个通用的。

wxml:

js:

data:{    formData:{        title:'',        phone:'',        address:''    }}

这样就可以用data-属性获取我当前需要修改的key，再结合上面动态变量

handleInput(e){    let valueName = e.target.dataset.name;    let name = `formData.${valueName}`;    this.setData({      [name]:e.detail.value    })  },

至此大功告成，虽然代码量没多少，如果不知道的话要花好多时间在这个上面。感谢前辈们的帖子，这里只描述了部分方法，还有很多更高级的用法，地址贴在下方。

参考网址：

https://blog.csdn.net/wuguidian1114/article/details/103293615

https://blog.csdn.net/weixin_47617631/article/details/126312443

https://blog.csdn.net/weixin_64397810/article/details/124218309

http://t.zoukankan.com/sgqwjr-p-9130744.html

https://blog.csdn.net/weixin_44151130/article/details/124649372

来源地址：https://blog.csdn.net/m0_61087678/article/details/128261059