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)
},

最终实现点击按钮实现切换:

 以上;