wepy开发小程序
以input为例,微信小程序没有数据双向绑定,input要显示绑定的数据即value等于一个绑定的量
<input type="text" value="{{inputdata}}"/>
data = {
inputdata: ‘数据‘
}
当在input中改变内容后,inputdata并不会变化,需要绑定事件,通过编写程序来改变inputdata。
但开发过程中如果input等表单控件很多的话,这些事件一个一个写就会感到很麻烦,所以编写一个程序来实现数据的绑定是大家都想实现的。
我实现的方法如下:
<input type="text" bindinput="inputeidt" data-obj="obj" data-item="item" value="{{obj.item}}"/>
inputeidt: function (e) { let dataset = e.currentTarget.dataset this[dataset.obj][dataset.item] = e.detail.value}
这样当input中输入内容时,数据也会发生改变。
这时虽然能实现数据随着视图变化,但对于数据的结构过于局限,只能是obj:{item: ‘’} 这样的,如果是这样的:
moreinfo: { title: ‘详细信息‘, get: ‘findDetailsByUserId‘, save: ‘saveDetails‘, item: { name: { name: ‘name‘, title: ‘姓名‘, type: ‘input‘, value: ‘‘, placeholder: ‘请填写‘, required: true }, sex: { name: ‘sex‘, title: ‘性别‘, type: ‘picker‘, value: ‘‘, placeholder: ‘请选择‘, required: true, range: [ { id: 1, name: ‘男‘ }, { id: 2, name: ‘女‘ } ] } }}绑定moreinfo.item.name.value就不行了, 我在解决时用了ES6的代理(写在onLoad中)
let self = this
self.saveinfo = new Proxy({}, {
set: function (target, key, value, receiver) {// 给saveinfo中属性赋值前,可以令程序执行其他功能 self.moreinfo.item[key].value = value
self.$apply() return Reflect.set(target, key, value, receiver) }})
项目中input是遍历出来的,遍历moreinfo.item
<input type="text" wx:if="{{item.type === ‘input‘}}" bindinput="inputeidt" data-obj="saveinfo" data-item="{{item.name}}" value="{{item.value}}"/>
这样就实现了。上面的js要写在onLoad中,如果在data中写的话,会发生问题,当页面第二次打开时,saveinfo便不再是代理,而变成了{},结果便不能正常改变数据的值
原文地址:https://www.cnblogs.com/sgqwjr/p/9130744.html
时间: 2024-10-30 08:12:08