liuyg
2021-10-09 2bd7308602abe6dee89f848d12923431150558f1
src/components/Subjects/Choices/index.vue
@@ -1,95 +1,101 @@
<template>
    <div>
        <div class="subject-content">
            <div class="subject-title">
                {{ index }}
                <span class="subject-title-content"
                      v-html="subjectInfo.subjectName" />
                <span class="subject-title-content">
                    (&nbsp;单选题&nbsp;<span v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0">&nbsp;{{subjectInfo.score}}分&nbsp;</span>)
                </span>
            </div>
  <div>
    <div class="subject-content">
      <div class="subject-title">
        {{ index }}
        <span class="subject-title-content" v-html="subjectInfo.subjectName" />
        <span class="subject-title-content">
          (&nbsp;单选题&nbsp;<span
            v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0"
            >&nbsp;{{ subjectInfo.score }}分&nbsp;</span
          >)
        </span>
      </div>
            <ul class="subject-options"
                id="subjectOptions"
                v-for="option in options"
                :key="option.id">
                <li class="subject-option">
                    <input
                            :disabled="currentAnswer"
                            class="toggle"
                           type="checkbox"
                           :checked="userAnswer === option.optionName"
                           :id="'option' + option.id"
                           @change="toggleOption(option)">
                    <label :for="'option' + option.id">
                        <span class="subject-option-prefix">{{ option.optionName + '.' }}&nbsp;</span>
                        <span v-html="option.optionContent"
                              class="subject-option-prefix" />
                    </label>
                </li>
            </ul>
        </div>
      <ul
        class="subject-options"
        id="subjectOptions"
        v-for="option in options"
        :key="option.id"
      >
        <li class="subject-option">
          <input
            :disabled="currentAnswer"
            class="toggle"
            type="checkbox"
            :checked="userAnswer === option.optionName"
            :id="'option' + option.id"
            @change="toggleOption(option)"
          />
          <label :for="'option' + option.id">
            <span class="subject-option-prefix"
              >{{ option.optionName + "." }}&nbsp;</span
            >
            <span v-html="option.optionContent" class="subject-option-prefix" />
          </label>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
    name: 'Choices',
    data () {
        return {
            subjectCount: 0,
            subjectInfo: {
                subjectName: '',
                score: 0
            },
            options: [],
            userAnswer: '',
            index: '',
            currentAnswer: false,
        }
  name: "Choices",
  data() {
    return {
      subjectCount: 0,
      subjectInfo: {
        subjectName: "",
        score: 0,
      },
      options: [],
      userAnswer: "",
      index: "",
      currentAnswer: false,
    };
  },
  methods: {
    getAnswer() {
      return this.userAnswer;
    },
    methods: {
        getAnswer () {
            return this.userAnswer
        },
        setAnswer (answer) {
            this.userAnswer = answer
        },
        setSubjectInfo (subject, subjectCount, index) {
            this.currentAnswer = false
            this.subjectCount = subjectCount
            this.subjectInfo = subject
            if (subject.hasOwnProperty('examSubjectOptions')) {
                this.options = subject.examSubjectOptions
    setAnswer(answer) {
      this.userAnswer = answer;
    },
    setSubjectInfo(subject, subjectCount, index) {
      this.currentAnswer = false;
      this.subjectCount = subjectCount;
      this.subjectInfo = subject;
      if (subject.hasOwnProperty("examSubjectOptions")) {
        this.options = subject.examSubjectOptions;
                console.log(this.options)
            }
            if (subject.hasOwnProperty('answer')) {
                if (subject.answer) {
                    this.currentAnswer = true
                }
                this.setAnswer(subject.answer)
            }
            this.index = index + '.'
            console.log(subject, subjectCount, index, this.options, 5656565656)
        },
        getSubjectInfo () {
            this.subjectInfo.options = this.options
            return this.subjectInfo
        },
        // 选中选项
        toggleOption (option) {
            this.userAnswer = option.optionName
        // console.log(this.options)
      }
      if (subject.hasOwnProperty("answer")) {
        if (subject.answer) {
          this.currentAnswer = true;
        }
    }
}
        this.setAnswer(subject.answer);
      }
      this.index = index + ".";
      // console.log(subject, subjectCount, index, this.options, 5656565656)
    },
    getSubjectInfo() {
      this.subjectInfo.options = this.options;
      return this.subjectInfo;
    },
    // 选中选项
    toggleOption(option) {
      this.userAnswer = option.optionName;
    },
  },
};
</script>
<style lang="scss" scoped>
@import '../../../assets/css/subject.scss';
@import "../../../assets/css/subject.scss";
.subject-options > li label {
    line-height: 36px !important;
  line-height: 36px !important;
}
</style>