javascript - Modify data in array

Question

// page3.js
Page({
  data:{
      option1: [
          { value: "1", contant: "A:xxxx", checked: false },
          { value: "2", contant: "B:xxxx", checked: false },
          { value: "3", contant: "C:xxxx", checked: false },
          { value: "4", contant: "D:xxxx", checked: false }
      ],
  },
  swiperChange: function(e){
      var that = this;
      console.log(that.data.option1[e.detail.value - 1].checked);
      that.data.option1[e.detail.value - 1].checked = true;
  }
})

<!--page3.wxml-->
        <radio-group bindchange="swiperChange">
            <label class="option" wx:for="{{option1}}" >
                <radio value="{{item.value}}" checked="{{item.checked}}" />{{item.contant}}
                <icon type="success_no_circle" size="24" class="icon" style="display:{{item.checked ? 'inline-block' : 'none'}}" />
            </label>
        </radio-group>
        
        /* page3.wxss */
radio{
    display: none
}
.option{
    border: 1px solid #ffe131;
    display: block;
    text-align: center;
    margin: 10% auto;
    width: 80%;
}

How to make the icon automatically display when the option is selected in the mini program

Answer 1

I just modified the swiperChange function:

  swiperChange: function (e) {
    this.data.option1.forEach( (item) => {
      item.checked = item.value === e.detail.value? true:false;
    });
    this.setData({
      option1: this.data.option1
    });
  }