表单复杂数据结构如何进行双向绑定？

简单的表单我知道可以用 this.setData(e.detail.value) 这样可以绑定

如果我的表单读取的data里自定义的复杂对象数据，如何进行双向绑定？

js:

  data: {

      wxId:"wx2002",

      name2: "张三",

      gender2: [

        { name: "男", value: '0', checked: true },

        { name: "女", value: '1', checked: false }

      ],

      skills2: [

        { name: 'HTML', value: 'html', checked: true },

        { name: 'CSS', value: 'css', checked: true },

        { name: 'JavaScript', value: 'js', checked: true },

        { name: 'Photoshop', value: 'ps', checked: true },

      ],

      opinion2: "测试"

  },

wxml:

  <form bindsubmit="submit">

    <view>

      <text>姓名:</text>

      <input name="name2" value="{{name2}}"/>

    </view>

    <view>

      <text>性别:</text>

      <radio-group name="gender2">

        <label wx:for="{{gender2}}" wx:key="value">

          <radio value="{{item.value}}" checked="{{item.checked}}"></radio>

        {{item.name}}</label>

      </radio-group>

    </view>

    <view>

      <text>专业技能：</text>

      <checkbox-group name="skills2">

        <label wx:for="{{skills2}}" wx:key="value">

          <checkbox value="{{item.value}}" checked="{{item.checked}}"></checkbox>

        {{item.name}}</label>

      </checkbox-group>

    </view>

    <view>

      <text>您的意见:</text>

      <textarea name="opinion2" value="{{opinion2}}"></textarea>

    </view>

    <view class="s_view">

      <button form-type="submit" class="submitBtn">提交</button>

      <button form-type="reset" class="resetBtn">清除</button>

    </view>

  </form>

尝试过 使用 this.setData(e.detail.value) 结果数据结构消失了 变成了简单的值

比如

gender2: [

        { name: "男", value: '0', checked: true },

        { name: "女", value: '1', checked: false }

      ],

在简单绑定后变成了 gender2 : 0

我想要的是 绑定后

比如单击了女，数据会变成

gender2: [

        { name: "男", value: '0', checked: false },

        { name: "女", value: '1', checked: true }

      ],

例子是书上的，没有给出双向绑定的答案。

我是初学者 谢谢