vue两层list循环后,内层循环页面选择类型
1.页面代码:
class="checkItemsBox"> class="title1">检查项 for="(item,index) in dictDataList" :key="item.dictLabel"> class="titleItem">{{item.dictLabel}} for="(dictItem,index2) in item.dictDataList" :key="dictItem.dictValue"> class="checkTitle">{{dictItem.remark}} class="btnBox"> class="btnItem" :class="dictMap[dictItem.dictValue] == 1?'select':''" data-item=1 @click="changeData($event,dictItem.dictValue)"> class="rightIcon" src="../../static/img/bar1/rightIcon.png" mode=""> 合格class="btnItem" :class="dictMap[dictItem.dictValue] == 2?'select':''" data-item=2 @click="changeData($event,dictItem.dictValue)"> class="wrongIcon" src="../../static/img/bar1/wrongIcon.png" mode=""> 不合格class="grayLine2">
2.onload中调用的获取数据方法:
onLoad(option) { // console.log("获取参数=====>" + option.dictType); var that = this; that.$myRequest({ url: 'app/getDetailByType/' + option.dictType, method: 'POST', data: {}, }).then(res => { console.log(JSON.stringify(res)); if (res.data.code == 200) { that.dictDataList = res.data.data; for (var i = 0; i < that.dictDataList.length; i++) { for (var j = 0; j < that.dictDataList[i].dictDataList.length; j++) { // 先默认都合格 // that.dictMap[that.dictDataList[i].dictDataList[j].dictValue] = 1; that.$set(that.dictMap, that.dictDataList[i].dictDataList[j].dictValue, 1) } } console.log(that.dictMap); uni.hideLoading(); } else if (res.data.code == 500) { uni.hideLoading(); uni.showToast({ title: res.data.msg, icon: 'none', duration: 2000 }); } }) },
注意:设置map的值时,需要通过this.$set设置为响应式数据,也就是说再次改变数据,视图会跟着变化;
3.onclick方法:
// 获取合格或者不合格 changeData(e, arg) { var that = this; that.$set(that.dictMap, arg, e.currentTarget.dataset.item) },
最终实现点击按钮实现切换:
以上;