vue+element ui 做试卷 循环题目和做了哪些题目出来

<template>

  <div class="exam-detail">

    <div class="inner">

      <div class="title">

        <nuxt-link to="/">首页</nuxt-link>\

        <nuxt-link to="/exam">考试系统</nuxt-link>\

        <span>试卷标题</span>

      </div>

      <div class="cont">

        <div class="cont-left">

          <div class="subhead">单选题</div>

          <div class="item" v-for="(i, index) in datalist" v-bind:key="index">

            <div class="subject">{{ index + 1 }}、{{ i.title }}</div>

            <el-radio-group

              v-model="choiseList[index]"

              class="option"

              @change="test(choiseList[index])"

            >

              <el-radio

                :label="options"

                v-for="(options, indx) in i.result"

                v-bind:key="indx"

                >{{ options.outanswer + "、" + options.outcome }}</el-radio

              >

            </el-radio-group>

          </div>

        </div>

        <div class="cont-right">

          <ul>

            <li

              v-for="(item, indxx) in datalist"

              v-bind:key="indxx"

              v-bind:class="item.className"

            >

              {{ indxx + 1 }}

            </li>

          </ul>

        </div>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  name: "_id",

  data() {

    return {

      datalist: [

        {

          title: "如果地球对应的是球，那么煎饼对应的是？",

          answer: "A",

          radio: "",

          show: "",

          result: [

            {

              outanswer: "A",

              outcome: "平坦"

            },

            {

              outanswer: "B",

              outcome: "旗子"

            },

            {

              outanswer: "C",

              outcome: "足球"

            },

            {

              outanswer: "D",

              outcome: "圆盘"

            }

          ]

        },

        {

          title:

            "条件1:所有的法国人都是正常人；条件2:所有的法国人都是喝酒的人；那么我们能得到的结论是:",

          answer: "A",

          radio: "",

          show: "",

          result: [

            {

              outanswer: "A",

              outcome: "至少有部分喝酒的人市正常的"

            },

            {

              outanswer: "B",

              outcome: "没有正常人是喝酒的人"

            },

            {

              outanswer: "C",

              outcome: "没有喝酒的人是正常人"

            }

          ]

        },

        {

          title: "如果地球对应的是球，那么煎饼对应的是？",

          answer: "A",

          radio: "",

          show: "",

          result: [

            {

              outanswer: "A",

              outcome: "平坦"

            },

            {

              outanswer: "B",

              outcome: "旗子"

            },

            {

              outanswer: "C",

              outcome: "足球"

            },

            {

              outanswer: "D",

              outcome: "圆盘"

            }

          ]

        },

        {

          title:

            "条件1:所有的法国人都是正常人；条件2:所有的法国人都是喝酒的人；那么我们能得到的结论是:",

          answer: "A",

          radio: "",

          show: "",

          result: [

            {

              outanswer: "A",

              outcome: "至少有部分喝酒的人市正常的"

            },

            {

              outanswer: "B",

              outcome: "没有正常人是喝酒的人"

            },

            {

              outanswer: "C",

              outcome: "没有喝酒的人是正常人"

            }

          ]

        }        

      ],

      choiseList: [],

    };

  },

  mounted(){

    this.rList()

  },

  methods: {

    test(options) {

      console.log(options)

      var arrSlect = this.choiseList;

      var rList = this.datalist

      // 选中的选项abcd

      var arrAll = [];

      arrSlect.forEach(function(e) {

        console.log(e);

        arrAll.push(e.outanswer);

      });

      // 循环原始数据 如果选中的题目存在就重新赋值className

      rList.map((item, index) => {      

       if(arrSlect[index]){

         item.className = 'green-bg'

       }

      });

       this.datalist = rList

    },

    rList(){

      // 遍历原题目添加属性

      var rList = this.datalist

      var rArr = []

      rList.map((item, index) => {

        rArr.push(Object.assign({}, item, { className: 'gray-bg' }));

      });    

      console.log(rArr)  

      this.datalist = rArr

    }

   

  }

};

</script>

<style scoped lang="scss">

.exam-detail {

  background: #fafafa;

  padding: 20px 0;

  box-sizing: border-box;

  .inner {

    width: 1200px;

    margin: 0 auto;

    .title {

      margin-bottom: 20px;

      a {

        color: #333;

        margin-right: 5px;

      }

    }

    .cont {

      display: flex;

      justify-content: space-between;

      .cont-left {

        width: 742px;

        background: #fff;

        min-height: 600px;

        .subhead {

          width: 100%;

          height: 47px;

          background: #effaff;

          line-height: 47px;

          color: #0076ff;

          padding-left: 26px;

          box-sizing: border-box;

          font-size: 16px;

          font-weight: bold;

        }

        .item {

          padding: 15px 26px;

          box-sizing: border-box;

          .subject {

            margin-bottom: 20px;

          }

          .option {

            /deep/ .el-radio {

              margin-bottom: 15px;

              display: flex;

              flex-direction: row;

              flex-wrap: wrap;

            }

            /deep/ .el-radio__input {

              display: block;

            }

            /deep/.el-radio__label {

              display: block;

              white-space: normal;

              width: 600px;

              line-height: 15px;

            }

          }

        }

      }

    }

  }

}

ul {

  width: 270px;

  // padding: 10px;

  // box-sizing: border-box;

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  flex-wrap: wrap;

  align-content: flex-start;

  align-items: flex-start;

  background: red;

  li {

    width: 35px;

    height: 35px;

    border-radius: 6px;

    margin: 5px;

    &.green-bg {

      background: green;

    }

    &.red-bg {

      background: red;

    }

    &.gray-bg {

      background: gray;

    }

  }

}

</style>

实现的效果图