使用Vue.componet 遇到的问题 --给个思路也行

Question

1想要实现这样的一种效果

我把选项使用 Vue.component来写 但是提交之后如何将答案与用户选择过的呈现出来 不太会弄 提交之后的效果如下

我的代码是这样写的。

<div id="qa">
        <h1>第4课 Photoshop</h1>
        <div>
            <div v-for="question in questions">
                {{question.title}}
                <ul>
                    <li v-for="(choiceitem,index) in question.choiceList" id="qa-question.id">
                        <p v-if="question.type==1">
                            <single :message="choiceitem.text" :qid="'question_'+question.id" :option="getOption(index)"></single>
                        </p>
                        <p v-if="question.type==2">
                            <mutli :message="choiceitem.text" :qid="'question_'+question.id" :option="getOption(index)"></mutli>
                        </p>
                    </li>
                </ul>
                <div v-show="issubmit">
                    正确答案:{{question.correctAnswer}} 是否正确{{question.isright}}ddd

                </div>
            </div>
        </div>
        <div @click="renderAns">提交</div>
    </div>
    

    <script type="text/javascript">
        var qaList = [{
            "id":1,
            "title":"PS有哪些功能?",
            "type":"1",
            "correctAnswer":"A",
            "choiceList":[{
                "id":2,
                "text":"美容"
            },{"id":3,"text":"整容"},{"id":4,"text":"毁容"}]
        },{
            "id":2,
            "title":"PS有哪些功能?",
            "type":"2",
            "correctAnswer":"A,B",
            "choiceList":[{
                "id":2,
                "text":"美容"
            },{"id":3,"text":"整容"},{"id":4,"text":"毁容"}]
        }]
    </script>
    <script type="text/javascript">
        //注册单选、多选、判断组件
        var answer = {};
        Vue.component('single',{
            props:['message','qid','option'],
            template:'<div><input type="radio" :name="qid" @click="answerHandler(qid,option)"/>{{option}}.{{message}}</div>',
            methods:{
                answerHandler:function(qid,option){
                    qid = qid.substring(9);
                    answer[qid] = option;
                }
            }
        });
        Vue.component('mutli',{
            props:['message','qid','option'],
            template:'<div><input type="checkbox" :name="qid" @click="answerHandler($event,qid,option)" :class="classObject"/>{{option}}.{{message}}</div>',
            computed:{
                classObject:function(){
                    return{
                        'check-right':true,
                        'check-error':false
                    }
                
                }
            },
            methods:{
                answerHandler:function(elem,qid,option){
                    qid = qid.substring(9);
                    if(typeof(answer[qid])=='undefined'){
                        answer[qid] = [];
                    }
                    if(elem.target.checked){
                        answer[qid].push(option);
                    }else{
                        for(var i=0;i<answer[qid].length;i++){
                            if(answer[qid][i]==option){
                                answer[qid].splice(i);
                            }
                        }
                    }
                }
            }
        });
    </script>
    <script>
        var vm = new Vue({
            el:"#qa",
            data:{
                questions:qaList,
                optionList:["A","B","C","D","E","F"],
                issubmit:false
            },
            methods:{
                getOption:function(index){
                    return this.optionList[index];
                },
                renderAns:function(){
                     this.issubmit = true;
                     for(var i = 0;i<this.questions.length;i++){
                         var qid = this.questions[i].id;
                         var correctAnswer = this.questions[i].correctAnswer;
                         var type = this.questions[i].type;
                         var selfans = answer[qid];
                         if(type == 2){
                             selfans = answer[qid].sort().join(",");
                         }
                         if(selfans == correctAnswer){
                             this.$set(this.questions[i],'isright',true);
                         }else{
                             this.$set(this.questions[i],'isright',false);
                         }

                     }
                }
            }
        })
    </script>

Answer 1

这有啥问题吗..功能不是实现了吗!