vue两层list循环后,内层循环页面选择类型

1.页面代码:

        <view class="checkItemsBox">
            <view class="title1">检查项</view>
            <view v-for="(item,index) in dictDataList" :key="item.dictLabel">
                <view class="titleItem">{{item.dictLabel}}</view>
                <view v-for="(dictItem,index2) in item.dictDataList" :key="dictItem.dictValue">
                    <!-- 复用 开始 -->
                    <view class="checkTitle">{{dictItem.remark}}</view>
                    <view class="btnBox">
                        <view class="btnItem" :class="dictMap[dictItem.dictValue] == 1?'select':''" data-item=1
                            @click="changeData($event,dictItem.dictValue)">
                            <image class="rightIcon" src="../../static/img/bar1/rightIcon.png" mode=""></image>合格
                        </view>
                        <view class="btnItem" :class="dictMap[dictItem.dictValue] == 2?'select':''" data-item=2
                            @click="changeData($event,dictItem.dictValue)">
                            <image class="wrongIcon" src="../../static/img/bar1/wrongIcon.png" mode=""></image>不合格
                        </view>
                    </view>
                    <!-- 复用 结束 -->
                </view>
                <view class="grayLine2"></view>
            </view>
        </view>

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

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

 以上;

posted @ 2021-11-16 12:26  丙炎  阅读(359)  评论(0)    收藏  举报