javascript - 修改数组中的数据

问题描述

问 题

// 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%;
}

请问在小程序中如何让icon在选项选中时自动显示

解决方案

我只是修改一下swiperChange函数：

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

这篇关于javascript - 修改数组中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！