javascript - 为什么小程序双向绑定会失效失效？

Question

请巨佬们给我看一个问题第一次写小程序,进入页面调了一个getUserInfo获取信息接口然后框里的数据全部正确显示出来了，但是我编辑完表单之后formData里还是没有变请问有啥问题吗

<van-field model:value="{{ formData.nickName }}" input-align="right" required clearable label="用户昵称" placeholder="请输入用户名昵称" /><van-field model:value="{{ formData.userName }}" input-align="right" required clearable label="登录账号" placeholder="请输入登录账号" disabled /><van-field model:value="{{ formData.password }}" input-align="right" required clearable label="登录密码" placeholder="请输入登录密码" /><van-field model:value="{{ formData.realName }}" input-align="right" required clearable label="姓名" placeholder="请输入姓名" />Page({    data:{        formData:{}    },    getUserInfo(){        ...这里挨个往formData赋值了    }})

Answer 1

看一下小程序语法官网 双向绑定暂不支持a.b这种形式 只支持a,b这种
https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html

Answer 2

这个问题可能是由于双向数据绑定在小程序中并不直接支持。小程序主要使用单向数据绑定，即从数据源到视图。双向数据绑定，即从视图到数据源的更新，是不被直接支持的。

在你的例子中，你试图通过model:value属性来绑定表单字段的值到formData对象。然而，当你在表单中编辑数据时，formData对象并没有发生改变。这是因为小程序并没有自动跟踪formData的变化并更新视图。

解决这个问题的一种方式是使用小程序的bind方法来手动绑定数据。这意味着你需要手动设置每个表单字段的value值，并在需要的时候更新formData对象。

例如：

<van-field bind:value="formData.nickName" input-align="right" required clearable label="用户昵称" placeholder="请输入用户名昵称" /><van-field bind:value="formData.userName" input-align="right" required clearable label="登录账号" placeholder="请输入登录账号" disabled /><van-field bind:value="formData.password" input-align="right" required clearable label="登录密码" placeholder="请输入登录密码" /><van-field bind:value="formData.realName" input-align="right" required clearable label="姓名" placeholder="请输入姓名" />

然后在你的Page对象中，你需要处理这些字段的变化：

Page({    data: {        formData: {}    },    onLoad: function() {        this.getUserInfo();    },    getUserInfo() {        // ... 这里往formData赋值了    },    onFormChange(e) {        // 当表单字段变化时，更新 formData        this.setData({            formData: {                ...this.data.formData,                [e.target.name]: e.detail.value            }        });    }});

在这个例子中，bind:value允许你将表单字段的值绑定到formData对象的相应属性上。当这些值发生变化时，小程序将调用onFormChange函数来更新formData对象。