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

场景:在我编辑表单的时候,希望将数据同步到最终提交的表单对象数据中,这里用的是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也提供了双向绑定数据的方法,但是那是简单的数据,如果是对象形式的好像就失效了,也许是我的方法不对,欢迎各位同仁指导

相关推荐
软件技术员22 分钟前
Let‘s Encrypt SSL证书:acmessl.cn申请免费3个月证书
服务器·网络协议·ssl
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
东华果汁哥1 小时前
【linux 免密登录】快速设置kafka01、kafka02、kafka03 三台机器免密登录
linux·运维·服务器
尘浮生2 小时前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
mengao12342 小时前
centos 服务器 docker 使用代理
服务器·docker·centos
C-cat.2 小时前
Linux|进程程序替换
linux·服务器·microsoft
怀澈1222 小时前
高性能服务器模型之Reactor(单线程版本)
linux·服务器·网络·c++
腾科张老师2 小时前
如何进行Apache的配置与调试?
apache
DC_BLOG2 小时前
Linux-Apache静态资源
linux·运维·apache
学Linux的语莫2 小时前
Ansible Playbook剧本用法
linux·服务器·云计算·ansible