小程序wxml的坑,checkBox多选回显及最多只能选择两项的问题
项目场景:checkbox下想要使用includes来判断下标数组中是否包含当前的value,问题描述:在使用checkbox时,本意想着每次选中都向一个数组中添加当前的value,然后通过includes来判断是否包含当前value来进行回显,结果发现不会回显,输出得知使用includes拿到的是undefined<view class="weui-cell__hd"><che
·
项目场景: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);
},

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