项目场景:
提示:这里简述项目相关背景:
例如:前端小程序记录错误bug
问题描述
提示:这里描述项目中遇到的问题:
例如:前端循环数组时页面数据无法显示
<checkbox-group bindchange="checkboxChange">
<label style="display: flex;" class="weui-cell weui-check__label" wx:for="{{itemTwo}}" wx:key="{{item.ss}}">
<view class="weui-cell__hd">
<checkbox value="{{item.value}}" checked="{{item.checked}}"/>
</view>
<view class="weui-cell__bd">{{item.courseName}}</view>
</label>
</checkbox-group>
js页面
items: [],
selectStageId: "",
itemTwo: [],
原因分析:
提示:这里填写问题的分析:
例如:{{itemTwo}}对应的是js里面定义的数组里面的值,并且页面拿的是{{itemTwo}} 里面赋值之前的值,所以是个空。
而且wx:key=“{{item.ss}}” 不能随意定义名字,页面上的字显示不出来。而且也勾选不中,

解决方案:
提示:这里填写该问题的具体解决方案:
例如:这里是选中状态的正确方案,
//其中this.data是用来获取页面data对象的
//this.setData是用来更新界面的,就是页面渲染时要用这个赋值
//页面值必须为{{value}},js定义值必须为{{value}}
js页面:
data:{
selectStageId: "",
}
//复选框选中
checkboxChange(e){
console.log('checkbox发生change事件,携带value值为:', e.detail.value)
const items = this.data.itemTwo
const values = e.detail.value
for (let i = 0, lenI = items.length; i < lenI; ++i) {
items[i].checked = false
for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
//循环6次,传来的值若与Item里面的值相等,则状态为true,则停止循环
//只是获得了选中状态为true的值,页面值必须为{{value}},js定义值必须为{{value}}
if (items[i].value === values[j]) {
items[i].checked = true
break
}
}
}
var selectStageIdTemp = "";
for (let i = 0, lenI = items.length; i < lenI; ++i) {
if(items[i].checked == true){
selectStageIdTemp = selectStageIdTemp + items[i].id + ",";
}
}
// this.setData({
// selectStageId: selectStageIdTemp
// })
//console.log(this.data.items);
this.setData({
itemTwo:items
})
this.setData({
'teacherInfo.selectStageId': selectStageIdTemp
})
},
wxml页面:
<checkbox-group bindchange="checkboxChange">
<label style="display: flex;" class="weui-cell weui-check__label" wx:for="{{itemTwo}}" wx:key="{{item.value}}">
<view class="weui-cell__hd">
<checkbox value="{{item.value}}" checked="{{item.checked}}"/>
</view>
<view class="weui-cell__bd">{{item.courseName}}</view>
</label>
</checkbox-group>