vue试卷单选多选处理

蓝白风铃草

已于 2024-05-13 11:06:41 修改

阅读量232

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2024-05-13 11:02:34 首次发布

本文链接：https://blog.csdn.net/Y2960018173/article/details/138791914

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先所有的数据在一个数组内，方便处理数据以及展示

提示：我这里用的都是多选框，想要单选多选分开顺序不变的把我这个多选改成单选就行了

<div class="box" v-for="(item, index) in uep_content" :key="index">
    <div class="danXuanTi" v-if="item.option">
        <div class="ti_title">
            <span>{{ index + 1 }}</span>&nbsp;
            <p>{{ item.question }}</p>
        </div>
        <div class="danXuanTi_xuanZe">
            <el-checkbox-group v-model="item.onarr">
                <el-checkbox :label="yingwen[opIndex]" v-for="(option, opIndex) in item.option"
                    :key="opIndex">
                    <p>{{ yingwen[opIndex] }}.&nbsp;{{ option }}</p>
                </el-checkbox>
            </el-checkbox-group>
        </div>
    </div>
    <div class="tiJi" v-if="item.problem_set">
        <div class="ti_title">
            <span>{{ index + 1 }}</span>&nbsp;
            <p>{{ item.describe }}</p>
        </div>
        <div class="wentiji" v-for="(item2, index2) in item.problem_set" :key="index2">
            <div class="xiaoTi_title">
                <span>{{ index2 + 1 }}</span>&nbsp;
                <p>{{ item2.question }}</p>
            </div>
            <div class="duoCegn_xuanZe">
                <el-checkbox-group v-model="item2.onarr">
                    <el-checkbox :label="yingwen[opIndex]" v-for="(option, opIndex) in item2.option"
                        :key="opIndex">
                        <p>{{ yingwen[opIndex] }}.&nbsp;{{ option }}</p>
                    </el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
    </div>
</div>

数据存放

abcd这个数组是方便循环展示选项并记录选项答案的

 data() {
        return {
            uep_content: [], // 所有题
            yingwen: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'],
        };
    },

数据处理

思路：给每一个选项的集合同级处添加一个空数组用来存放选项答案

let s = ceshi   // 接口给的数据
let aa = []
let bb = []
s.map((item, index) => {
    if (item.option) {
        // this.$set(item, 'onarr', [])  // 添加空数组 改变原数组会使数据展示不出来 要用变量接受一下 否则就用$set添加空数组
        item.onarr = []
        aa = item.option.split('|')
        item.option = aa
    } else if (item.problem_set) {
        item.problem_set.map(items => {
            items.onarr = []
            bb = items.option.split('|')
            items.option = bb
        })
    }
})
this.uep_content = s

不足之处还请大家评论区多多指点