微信小程序多数据实现双向绑定

2,945 阅读2分钟
## 微信小程序多数据实现双向绑定

我们都知道小程序数据只有单向绑定,但是业务中就是会出现那么多小惊喜既然解决不了给惊喜的人我们就自己变成惊喜,下面就分享我的一个小小的发现

当当当 就是他 就是他 input

input是微信小程序里本就有的事件 它有一个神仙属性 e.detail.value 现在我们就来安排他

先给他来个数据

这里的每一个字段都对应一个要输入的数据 刚开始做的时候脑阔都要抠成光头,可能这就是菜鸡吧

现在我们把这组数据循环到页面上,不说了直接上图

页面渲染了我们的数据怎么绑定呢

下面开始做笔记了哈 小本本拿出来

红框框里的超级重要 超级重要 超级重要 重要的事情要说三遍 我们用小程序给事件传值的方式将上面数组的下标和键名传给处理函数 i===下标 ====>item===键名

获取了下标和键名后我们该干什么呢 对对对 绑定数据 这就跟跟追菇凉一样 聊天之后该约出来了赛

let 一个走进菇凉心里的变量

let item = e.currentTarget.dataset.item;

菇凉出来了你不能没有安排呀 带她去玩剧本杀、欢乐谷 让她的心怦怦跳

let i = e.currentTarget.dataset.i

出来玩也玩了 该找到她的家准备下一次约会

const equipment = this.data.equipment 快点送她回家了 宵禁重点要考

哇哇哇 约出来了 也知道她家了

我们该怎么办呢

上去喝杯茶???

超级重要的:e.detail.value

送上我们的小礼物 equipment[i][item] = e.detail.value 这里我们用使用数组的方法先找到下标再通过键名修改属性值,这一步到了我们就完成了一大步啦 ##

放大招

this.setData({ equipment: equipment, })

温馨小提示:这上面的数据加多少对象都是可以的哦

我们是不是完成了???? 最后上我们的函数图

好像也没有那么难······ 所以说要怎样才能成为大佬