小程序给对象赋值(双向绑定)方法之一

场景:在我编辑表单的时候,希望将数据同步到最终提交的表单对象数据中,这里用的是vantUI的 van-field 组件

wxml:

html 复制代码
<van-field model:value="{{loginParams.username}}" clearable placeholder="输入账号或手机号码" error="{{!loginParams.username}}" left-icon="contact" bind:click-icon="onClickIcon" data-name="username" bind:change="changeForm" />

<van-field class="pawd" model:value="{{loginParams.password}}" type="{{paswdType}}" left-icon="lock" error="{{!loginParams.password}}" placeholder="请输入密码" icon="{{seePaswd}}" clearable bind:click-icon="paswdSee" data-name="password" bind:change="changeForm" />

先根据数据名称绑定 data- 属性:

因为我的用户名叫做****username所以给账号就绑定 data-name="username"

密码跟账号的方法一样

然后再绑定同样的事件: bind:change="changeForm"

JS:

javascript 复制代码
data:{
loginParams:{
        username:'',
        password:'',
        code:''
      }

}


///方法:
changeForm(e){//更改表单的方法
      let curType = e.currentTarget.dataset.name//获取对应的对象名称
      this.setData({
        [`loginParams.${curType}`]:e.detail//根据对象名称赋值
      })
    }

到这,就成功了

vantui也提供了双向绑定数据的方法,但是那是简单的数据,如果是对象形式的好像就失效了,也许是我的方法不对,欢迎各位同仁指导

相关推荐
橘猫云计算机设计15 分钟前
基于django优秀少儿图书推荐网(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·python·小程序·django·毕业设计
阳区欠2 小时前
【Linux】进程通信
linux·运维·服务器·共享内存·进程通信·system v·管道文件
may_一一2 小时前
终端SSH连接工具SecureCRT安装和连接Linux
运维·服务器·ssh
厦门德仔3 小时前
【C#】C#字符串拼接的6种方式及其性能分析对比
服务器·windows·c#
认真敲代码的小火龙4 小时前
微信小程序(下)
微信小程序·小程序
❀͜͡傀儡师4 小时前
多台服务器上docker部署 Redis 集群
运维·服务器·redis
AdrichPro4 小时前
10、Linux C 网络编程(完整版)
linux·服务器·c语言·网络
IT 小旋风5 小时前
Linux centos 7 常用服务器搭建
linux·服务器·centos
sszdlbw5 小时前
文件包含漏洞的小点总结
服务器·安全·web安全·php
全马必破三5 小时前
http知识点
服务器·网络协议·http