From 60e637aa425a76b452009d0720fce32225c4629f Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期一, 01 七月 2024 13:59:22 +0800 Subject: [PATCH] fix:多选题问题 --- src/views/exam/components/answer-main/answer-multiple/index.vue | 27 +++++++++++++++++---------- 1 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/views/exam/components/answer-main/answer-multiple/index.vue b/src/views/exam/components/answer-main/answer-multiple/index.vue index 4142e61..978edc4 100644 --- a/src/views/exam/components/answer-main/answer-multiple/index.vue +++ b/src/views/exam/components/answer-main/answer-multiple/index.vue @@ -1,10 +1,10 @@ <template> <div class="answer-container w-full h-full"> <el-scrollbar> - <ExamInfo class="mb-5" :questionIndex="currentIndex" :title="activeQuestion.title"></ExamInfo> + <ExamInfo class="mb-5" :questionIndex="currentIndex" :activeQuestion="activeQuestion"></ExamInfo> <div class="answer-content"> - <div class="answer-item flex" v-for="item, index in activeQuestion.items" @click="answerClick(item)" + <div class="answer-item flex" v-for="item, index in activeQuestion.questionItemList" @click="answerClick(item)" :class="answerState(item)"> <div class="answer-icon flex flex-col justify-center items-center flex-shrink-0">{{ item.prefix }}</div> <div class="answer-text text-gray-700">{{ item.content }}</div> @@ -17,32 +17,38 @@ <script setup> import { ref } from 'vue'; -import {storeToRefs} from 'pinia'; +import { storeToRefs } from 'pinia'; import ExamInfo from '@/components/ExamInfo/index.vue'; -import {useExamStore} from '@/store/index.js'; +import { useExamStore } from '@/store/index.js'; const examStore = useExamStore(); -const {currentIndex} = storeToRefs(examStore); +const { currentType, currentIndex } = storeToRefs(examStore); const activeQuestion = ref(examStore.getActiveQuestion); const answerClick = (item) => { - if(item) { - // resetAnswer(); + if (item) { item.isActive = !item.isActive; + const answerList = filterAnswer(); + examStore.setQuestionAnswerList(currentType.value, currentIndex.value, answerList); } }; const answerState = (item) => { + if(Array.isArray(activeQuestion.value.answerList) && activeQuestion.value.answerList.includes(item.prefix)) { + item.isActive = true; + } return { active: item.isActive }; +}; + +const filterAnswer = () => { + return activeQuestion.value.questionItemList.filter(item => item.isActive).map(item => item.prefix); } -const resetAnswer = () => { - activeQuestion.value.items.forEach(item => item.isActive = false); -} + </script> @@ -85,6 +91,7 @@ .active { border-color: #409EFF !important; + .answer-icon { color: #ffffff !important; border-color: #409EFF !important; -- Gitblit v1.8.0