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

Question

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

发布于
2023-11-20 江苏

请巨佬们给我看一个问题第一次写小程序,进入页面调了一个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赋值了
    }
})

前端 javascript 小程序

阅读 1.1k

AI BotBETA

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

在你的例子中，你试图通过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对象。

1 个回答

得票最新

小羊不想失棉

5701214

发布于
2023-11-20 江苏

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

撰写回答