微信小程序 结合vant weapp的复选框（checkbox）组件实现动态绑定object类型数据

我是结合的vant weapp的checkbox实现的，官网文档地址
要实现以上复选框功能：
官网文档中举例子

复选框组
需要与van-checkbox-group一起使用，选中值是一个数组，通过value绑定在van-checkbox-group上，数组中的项即为选中的Checkbox的name属性设置的值。
<van-checkbox-group value="{{ result }}" bind:change="onChange">
  <van-cell-group>
    <van-cell
      wx:for="{{ list }}"
      wx:key="index"
      title="复选框 {{ item }}"
      value-class="value-class"
      clickable
      data-index="{{ index }}"
      bind:click="toggle"
    >
      <van-checkbox
        catch:tap="noop"
        class="checkboxes-{{ index }}"
        name="{{ item }}"
      />
    </van-cell>
  </van-cell-group>
</van-checkbox-group>

Page({
  data: {
    list: ['a', 'b', 'c'],
    result: ['a', 'b']
  },

  onChange(event) {
    this.setData({
      result: event.detail
    });
  },

  toggle(event) {
    const { index } = event.currentTarget.dataset;
    const checkbox = this.selectComponent(`.checkboxes-${index}`);
    checkbox.toggle();
  },

  noop() {}
});

在实际应用中一般数据都是object类型，如下

.js页面代码
  data: {
    checked: false,//是否使用积分抵扣
    totalPrice: 280,
    show: false,//观影人列表是否显示
    list: [{ id:"001",name: "小小新", code: "210*******2858" }, {  id:"002",name: "小新", code: "210*******2158" }],
    result: []
  },
  
   onChangeList: function (event) {
    var that = this;
    var array = event.detail;
    that.setData({
      result: array,
    })
  },

.wxml页面代码
  <van-checkbox-group value="{{result}}" bind:change="onChangeList">
        <van-cell-group>
          <van-cell wx:for="{{list}}" wx:key="index" title="{{item.name}}" label="{{item.code}}" clickable
            data-index="{{index}}" title-width="94%" center>
            //所以在此处赋值的一定要支出对象的具体ID值“itme.id”
            <van-checkbox name="{{item.id}}" data-data="{{item}}"></van-checkbox>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      

主要的实现思路就是使用动态object绑定数据van-checkbox-group的过程。