一頁多題，類型包括單選（單選、判斷）和多選，radio和checkbox混合使用，答案檢驗數(shù)據(jù)匹配，正確答案格式化，答案提交數(shù)據(jù)格式化，數(shù)據(jù)提交。

效果：

數(shù)據(jù)獲?。?/h2>

數(shù)據(jù)提交：

HTML：

<template>

<!--其他HTML結(jié)構(gòu)-->

<ul class="question f16">
  <li v-for="(list,index) in questionData" :key="index">
    <h5>{{list.type}}題</h5>
    <h6 v-if="isScoreTxt">
      <b :class="{daanErr:list.scoreTxt !='正確'}" v-if="list.scoreTxt !='正確'">正確選項是：{{list.scoreTxt}}</b>
      <b v-else>{{list.scoreTxt}}</b>
    </h6>
    
    <!--單選及判斷-->
    <dl v-if="list.type != '多選'">
      <dt v-html="list.title"></dt>
      <dd>
        <label v-for="(radio,id) in list.xuanxiang" :key="id">
          <input type="radio" :name="list.id" :value="list.id+'_'+radio.name" v-model="radioData[list.id]">
          <span><b>{{radio.name}}</b>{{radio.content}}</span>
        </label>
      </dd>
    </dl>

    <!--多選-->
    <dl v-else>
      <dt v-html="list.title"></dt>
      <dd>
        <label v-for="(checkbox,checkboxIndex) in list.xuanxiang" :key="checkboxIndex">
          <input type="checkbox" :value="list.id+'_'+checkbox.name" v-model="checkData">
          <span><b>{{checkbox.name}}</b>{{checkbox.content}}</span>
      </label>
    </dd>
    </dl>
  </li>
</ul>
<div class="checkEnterBt f18 sysmt40">
  <button @click="checkEnter">提交答案</button>
  <button @click="checkChange">換題再測試</button>
</div>

<!--其他HTML結(jié)構(gòu)-->

</template>

JS：

<script setup>
import { defineComponent, getCurrentInstance, ref, reactive, computed, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured, onRenderTracked, onRenderTriggered, onActivated, onDeactivated, onServerPrefetch, watch,toRaw } from 'vue';
import {useRoute, onBeforeRouteUpdate} from 'vue-router'
import { useStore } from 'vuex';

//vantUl的showToast請?zhí)崾?import { showToast } from 'vant';

//使用vue的getCurrentInstance 方法獲取當(dāng)前組件實例
const { proxy } = getCurrentInstance()

//獲取vuex數(shù)據(jù)
let store = useStore();

//使用router
const route = useRoute()


//獲取題目列表數(shù)據(jù)
let questionData = ref([]) //答題數(shù)據(jù)
let answerData = ref([]) //格式化后答案
const getQuestion = () => {

    /*axois獲取題目數(shù)據(jù)*/

    console.log(response.data.data.data)

    questionData.value = response.data.data.data

    //格式化數(shù)據(jù)答案為[id,選項],單選[id,A],多選[id,A],[id,C]
    for(let i=0;i<response.data.data.data.length;i++){
      for(let n=0;n<response.data.data.data[i].daan.length;n++){
        if(response.data.data.data[i].daan[n] != "_"){
          answerData.value.push([response.data.data.data[i].id,response.data.data.data[i].daan[n]])
        }
      }
    }

  /*其他代碼*/

}


//答案選擇
let radioData= ref([]) //單選
let checkData = ref([]) //多選
let selectData = ref([]) //單選和多選合集
let isScoreTxt = ref(false) //答案是否顯示校正 防多次點擊


const checkEnter = ()=>{
  if(!isScoreTxt.value){
    let newSelect = [] //單選+多選
    newSelect = Object.values({...checkData.value,...radioData.value})
    //console.log(newSelect)
    for(let y=0;y<newSelect.length;y++){
      selectData.value.push(newSelect[y].split("_"))
    }
    //console.log(selectData.value)
    for(let s=0;s<selectData.value.length;s++){
      let selectID =  selectData.value[s][0] //用戶答題id
      let selectTxt = '' //用戶選擇答案
      let daanTxt = '' //正確答案
      let enterTxt = '' //按后端要求格式化用戶每次選擇答案
      let find=0 //查找次數(shù)
      for(let i=0;i<selectData.value.length;i++){
        if(selectData.value[i][0] == selectID){
          selectTxt += selectData.value[i][1]
          enterTxt += selectData.value[i][1]+'_'
        }
      }
      for(let a=0;a<answerData.value.length;a++){
        if(answerData.value[a][0] == selectID){
          daanTxt += answerData.value[a][1]
        }
      }
      for(let x=0;x<scoreEnter.length;x++){
        if(selectID == scoreEnter[x][0]){
          find=1
        }
      }
      if(find ==0){
        let enter = [selectID,'-'+enterTxt]
        scoreEnter.push(enter)
        let index = '' //查找對應(yīng)id的下標(biāo)
        for(let q=0;q<questionData.value.length;q++){
          index = questionData.value.findIndex(item => item.id == selectID)
        }
        if(selectTxt.split("").sort().join("") == daanTxt.split("").sort().join("")){
          questionData.value[index].scoreTxt="正確"
        }else{
          questionData.value[index].scoreTxt=daanTxt
        }
      }
    }
    if(scoreEnter.length == questionData.value.length){
      isScoreTxt.value = true
      let enterData = []
      for(let u=0;u<scoreEnter.length;u++){
        enterData.push(scoreEnter[u].join("").slice(0,-1))
      }
      let params = {
       /*其他參數(shù) category_id:proxy.$route.params.category_id,*/
        ti_str:enterData.toString(),
      }

      /*數(shù)據(jù)提交*/

        if(response.data.status == 1){
          showToast("答題提交成功！");
        }

      /*數(shù)據(jù)提交*/

    }else{
      showToast("回答完全部問題再提交答案哦！");
    }
  }else{
    showToast("校正及正確選項已顯示，請換題再測！");
  }
}

//換題再測試
const checkChange = ()=>{
  questionData.value = undefined
  answerData.value = []
  radioData.value = []
  checkData.value = []
  selectData.value = []
  scoreEnter=[]
  getQuestion()

}


onBeforeMount(() => {
  getQuestion()

})

</script>

CSS:

.question li{background:#fff;padding:30px 20px 20px 20px;border-radius:10px;box-shadow:0 0 7px #ccc;border:1px solid #eaeaea;margin-bottom:40px;position:relative;}
.question li h6{position:absolute;right:20px;top:30px;}
.question li h6 b.daanErr{color:#e60000;}
.question li h6 b{color:#018407;}
.question li h5{border-left:4px solid #ff6e52;font-size:20px;font-weight:bold;padding-left:15px;margin-bottom:20px;}
.question li dt{padding:0 0 20px 20px;}
.question li dd{padding-right:50px;}
.question li label{display:line-block;position:relative;margin:0 20px 20px 0;padding-left:20px;}
.question li label span{border:1px solid #d0d0d0;border-radius:10px;padding:7px 20px;box-sizing:border-box;display:inline-block;line-height:26px;}
.question li label input{display:none;}
.question li label input:checked+span{background:#fffafa;z-index:2;color:#b80000;border:1px solid #b80000;border-radius:10px;}
.question li label span b{display:inline-block;font-weight:normal;margin-right:5px;}


.checkEnterBt{display:flex;justify-content:space-around;align-items:center;}
.checkEnterBt button{width:40%;background:#e60000;color:#fff;border:none;padding:20px 0;border-radius:10px;}
.checkEnterBt button:nth-child(2){background:#007ce6;}

解釋：

數(shù)據(jù)里的答案為：A_B_C_D

需要校正展示的答案為：ABCD

提交數(shù)據(jù)的答案為：題目id-A_B_C_D

通過 :value="list.id+'_'+radio.name"? 和??:value="list.id+'_'+checkbox.name" 將選中數(shù)據(jù)統(tǒng)一為題目id_選項

<input type="radio" :name="list.id" :value="list.id+'_'+radio.name" v-model="radioData[list.id]">


<input type="checkbox" :value="list.id+'_'+checkbox.name" v-model="checkData">

展開運算符（用于展開可迭代對象（如數(shù)組、字符串等）為獨立的元素，或者用于將多個元素合并為一個數(shù)組或?qū)ο?/strong>）+Object.values()（返回一個給定對象自己的所有可枚舉屬性值的數(shù)組）將單選和多選數(shù)據(jù)選擇數(shù)據(jù)合并到一個數(shù)組中，將原數(shù)據(jù)['題目id_選項值','題目id_選項值']格式化成[題目id,選項值],[題目id,選項值]

let newSelect = [] //單選+多選
newSelect = Object.values({...checkData.value,...radioData.value})
//格式化單選多選合并后的數(shù)據(jù)為[id,選項] 單選[id,A],多選[id,A],[id,C]
for(let y=0;y<newSelect.length;y++){
  selectData.value.push(newSelect[y].split("_"))
}