项目场景:checkbox下想要使用includes来判断下标数组中是否包含当前的value,


问题描述:在使用checkbox时,本意想着每次选中都向一个数组中添加当前的value,然后通过includes来判断是否包含当前value来进行回显,结果发现不会回显,输出得知使用includes拿到的是undefined

<view class="weui-cell__hd">
   <checkbox value="{{item.value}}" checked="{{values.incloudes(item.value)}}"/>
</view>

原因分析:

在wxml中不可使用incloudes、indexOf等这种,所以导致无法判断


解决方案:

为options添加一个checked属性来专门控制是否选中,在每次值改变时去修改这个属性

 // idxs与options分别代表下标集合和复选框选项   
 resetOptions() {
      let { idxs, options } = this.data;
      options.forEach((el) => {
        if (idxs.includes(el.value)) {
          el.checked = true;
        } else {
          el.checked = false;
        }
      });
      this.setData({
        options,
      });
    },
    checkboxChange(e) {
      const _this = this;
      let value = e.target.dataset.value;
      let { idxs } = this.data;
      if (idxs.includes(value)) {
        idxs.splice(idxs.indexOf(value), 1);
      } else {
        if (idxs.length >= 2) {
          wx.showToast({
            title: "最多只能选择两项",
            icon: "none",
          });
          return;
        }
        idxs.push(value);
      }
      this.setData(
        {
          idxs,
        },
        () => {
          _this.resetOptions();
        }
      );
      this.triggerEvent("bindchange", this.data.idxs);
    },

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐