【小程序】Vant-Weapp Radio单选框组件无法触发bind:Change事件

基础库: 2.24.4
vant-weapp: 1.10.3

---

今天在用vant的时候发现一个bug:
与 Cell 组件一起使用时，点击Cell时能触发Click事件，但不能触发Change事件；仅在点击图标时能同时触发Click和Change事件，代码如下

<van-radio-group value="{{ radio }}" bind:change="onChange">
  <van-cell-group>
    <van-cell title="单选框 1" clickable data-name="1" bind:click="onClick">
      <van-radio slot="right-icon" name="1" />
    </van-cell>
    <van-cell title="单选框 2" clickable data-name="2" bind:click="onClick">
      <van-radio slot="right-icon" name="2" />
    </van-cell>
  </van-cell-group>
</van-radio-group>

Page({
  data: {
    radio: '1',
  },

  onChange(event) {
    console.log("onChange")
    this.setData({
      radio: event.detail,
    });
  },

  onClick(event) {
    const { name } = event.currentTarget.dataset;
    console.log("onClick", name)
    this.setData({
      radio: name,
    });
  },
});

解决办法就是在Click事件处理函数中实现Change事件处理函数, 代码如下
记得不要注册bind:change，不然会重复执行

<van-radio-group value="{{ radio }}">
  <van-cell-group>
    <van-cell title="单选框 1" clickable data-name="1" bind:click="onClick">
      <van-radio slot="right-icon" name="1" />
    </van-cell>
    <van-cell title="单选框 2" clickable data-name="2" bind:click="onClick">
      <van-radio slot="right-icon" name="2" />
    </van-cell>
  </van-cell-group>
</van-radio-group>

Page({
  data: {
    radio: '1',
  },

  onChange(event) {
    console.log("onChange")
    this.setData({
      radio: event.detail,
    });
  },

  onClick(event) {
    const { name } = event.currentTarget.dataset;
    console.log("onClick", name)
    if (name !== this.data.radio) {
      this.onChange(event);
    }
    this.setData({
      radio: name,
    });
  },
});

参考：https://youzan.github.io/vant-weapp/#/radio