【无标题】Vue+element Ui 考试系统 考试过程中多选题答案存放问题

在线考试系统考生考试前端设计中，我将考生的答案全部存到一维数组中

 studentAnswer:{
        studentId:0,//存放考生id
        examId:0,  //存放考试id
        titleAnswer:[],  //存放考生的全部答案
        titleId:[],
      },

通过v-for 获取每道题目的作答

但是这样存放多选题时遇到了问题
多选题使用的是 el-checkbox 组件

              <el-checkbox-group v-model="studentAnswer.titleAnswer[index]"  > 
                <el-checkbox :label="item.option_a"></el-checkbox>
                <el-checkbox :label="item.option_b"></el-checkbox>
                <el-checkbox :label="item.option_c"></el-checkbox>
                <el-checkbox :label="item.option_d"></el-checkbox>
            </el-checkbox-group>

这样显然是不对的，因为多选框需要绑定的是数组，而studentAnswer.titleAnswer[index]只能存放字符串

所以为了能存放多选题 进行了以下尝试（可以直接跳到第三种，第三种可行，前两中是错误尝试，只是记录一下）

第一种

需要绑定数组，就创建一个数组，专门用来存放多选题

 data() {
    return {
      mulanswer:[]
      省略其他
      }
      }

但是这样存放的答案是自增的，存在
1、所有多选题的答案存放混在一起了
2、回去修改答案的时候，它会直接存放在数组末尾，所以一道题还不是挨着存放的
eg：0 1 2是第一道多选题答案
2 4 7 8是第二道多选题答案

第二种

直接在 el-checbox 中添加事件@mouseleave=“mulleave（index）”

   mulleave(index){
    this.studentAnswer.titleAnswer[index]=JSON.stringify(this.mulanswer)
    this.mulanswer=[]
  },

在鼠标离开这道多选题时将数组中的答案转成字符串存到studentAnswer.titileAnswer[index]中
但是这样有个很大的问题，因为每次mulanswer会清空，所以考生界面不会显示自己选中的答案。

第三种

上述两种是我的尝试，都不可行，最后想到了使用二维数组存放

  mulanswer:[[]],

多选框绑定一维数组存放答案

  <el-checkbox-group v-model="mulanswer[index]"   >
                    <el-checkbox :label="item.option_a"></el-checkbox>
                    <el-checkbox :label="item.option_b"></el-checkbox>
                    <el-checkbox :label="item.option_c"></el-checkbox>
                    <el-checkbox :label="item.option_d"></el-checkbox>
                </el-checkbox-group>

需要注意的是

使用二维数组时，每一行都要新建一个一维数组，不然会报错。
此处由于我使用index（也就是第几题） 为索引存放答案的 ，所以为了方便 ，我建立数组的长度是所有题目的长度，（我也只能想到这样）

initMuiAnswer()
{
for(let index=0;index<this.allTitle.length;index++)
{
this.mulanswer[index] = new Array();
}
},

结果如下

0 1 2是多选题 成功存放了多选题答案

最后使用JSON.stringify 把数组转成字符串再存到我的答案数组即可