问题

最近写了微信小程序，在提交表单时，需要记录用户填写的数据，作为参数，传给后端接口。

问题来了，在vue3中通过v-model让表单数据形成响应式的。且支持数据是深层次的。比如定义一个form对象，内部存储表单数据，用户一填写某个数据，那么form绑定的字段数据也会发生相应改变。

可是在微信小程序中却行不通。查找资料得知。

可是我又需要这种形式的响应式怎么办？

方案

我这里使用了vant 微信小程序的组件库介绍 - Vant Weapp (gitee.io)

         <van-field
              value="{{ form.name }}"
              placeholder="姓名"
              border="{{ false }}"
              
              bind:change="onChange"
              data-name="name"
            />

 // 表单信息
 data{
    form: {
      name: ""     
        }
    },
    
 // 双向绑定表单
  onChange(e) {
    const key = Object.keys(e.currentTarget.dataset)[0];
    const form = { ...this.data.form };
    form[key] = e.detail;
    this.setData({
      form,
    });
  }

注意：data-name与form中的name一致。如data-phone,那么form就添加一个phone字段

微信小程序——表单响应式

问题

方案