SOURCE

var vm = new Vue({
    el:"#app",
    data: {
        // 答题卡列表
        questionList: [
            {
                id: 1,
                title: "摩托车驾驶需要什么驾照?",
                options: [
                    {
                        option:"A",
                        text:"C1",
                    },
                    {
                        option:"B",
                        text:"D",
                    },
                    {
                        option:"C",
                        text:"C2",
                    }
                ],
                value: ""
            },
            {
                id: 2,
                title: "转弯让直行是正确的吗?",
                options: [
                    {
                        option:"A",
                        text:"正确",
                    },
                    {
                        option:"B",
                        text:"错误",
                    }
                ],
                value: ""
            }
        ],
        // 当前答题卡下标
        currentIndex: 0,

    },
    computed: {
        // 计算属性-当前问题
        currentQuestion: function() {
            return this.questionList[this.currentIndex] || {}
        }
    },

    methods: {
        // 选项被选择
        onAnswerSelect: function(opt) {
            this.currentQuestion.value = opt.option
        },

        // 提交检查结果
        onAnswerCheck: function() {
            console.log('调用提交检查接口')
            // 模拟提交检查结果
            ajaxCheck(this.currentQuestion.id, this.currentQuestion.value)
                .then((data) => {
                    console.log(data.data.successAnswer, "xs")
                    // 追加属性: 正确答案
                    this.currentQuestion.successAnswer = data.data.successAnswer
                    // 追加属性: 是否提交过了
                    this.currentQuestion.isSubmited = true

                    this.$forceUpdate()
                })

        },

        // 下一题
        onAnswerNext: function() {
            if (this.currentIndex+1 == this.questionList.length) {
                alert('已经是最后一题了~')
                return;
            }

            this.currentIndex++
        }
    }
})


// 模拟提交检查答案接口
function ajaxCheck(id, value) {
    return new Promise((resolve, reject) => {
        if (id == 1) {
            resolve({
                code: 1,
                msg: '提交成功',
                data: {
                    // 正确答案
                    successAnswer: 'B'
                }
            })
        } else if (id == 2) {
            resolve({
                code: 1,
                msg: '提交成功',
                data: {
                    // 正确答案
                    successAnswer: 'A'
                }
            })
        }
    })
}

<div id="app">

    <!-- 答题卡 -->
    <div class="answer-card">
        <div class="question-title">{{ currentQuestion.title }}</div>
        <div class="options">
            <div 
                class="option"
                :class="{
                    'active': currentQuestion.value == opt.option,
                    'error': currentQuestion.isSubmited && currentQuestion.successAnswer != currentQuestion.value,
                    'success': currentQuestion.isSubmited && currentQuestion.successAnswer == opt.option
                }"
                v-for="opt in currentQuestion.options" 
                :key="opt.option"
                @click="onAnswerSelect(opt)"
            >
                {{opt.option}}. {{opt.text}}
            </div>
        </div>
    </div>

    <button v-if="!currentQuestion.isSubmited" class="btn" @click="onAnswerCheck">检查结果</button>
    
    <button v-else class="btn" @click="onAnswerNext">下一题</button>


</div>

.answer-card {
    background: #fff;
    border-radius: 5px;
    padding: 10px;
}

.question-title {
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px dashed #eee;
    line-height: 36px;
}

.options {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

.options .option {
    background: #eee;
    border-radius: 5px;
    padding: 5px 6px;
}

.options .option.active {
    background: #91a7ff;
    color: #fff;
}

.options .option.active.error {
    background: red;
    color: #fff;
}

.options .option.success {
    background: #38d9a9;
    color: #fff;
}

.options .option + .option {
    margin-top: 8px;
}

.btn {
    margin-top: 20px;
    background: #456dea;
    width: 100%;
    border: none;
    color: #fff;
    padding: 8px 12px;
    border-radius: 5px;
}