Question

我需要在答案栏中显示答案。 {correctanswer（question.responses）}}当前，当我循环浏览响应时，我变得不知所措

<div class="ques_block" v-for="(question, index) in quiz.questions">

    <div v-show="index === questionIndex">
        <h3>{{index + 1}}) {{question.text}}</h3>
            <div class="option_div" v-for="(response,resp) in question.responses">
                <input type="radio" v-bind:name="index"  v-bind:value="response.correct"  v-model="userResponses[index]"/>
                <label>   {{response.text}} </label>
            </div>
            <!--<div class="frm_grp">
                <a href="" v-on:click.prevent="submit" class="submit_answer" >Submit</a>
            </div>-->
            <div class="error_block hide alert alert-success">  
                <p>Correct</p>
            </div>
            <div class="error_block hide alert alert-danger">   
                <p>Incorrect</p>
            </div>
            <div class="answer_block ">
                <h4>Answer Details</h4>
                <p>Option {{correctanswer(question.responses)}} is the correct answer</p>
            </div>

此功能不起作用，表示响应未定义。

        correctanswer: function (responses) {
            var mapping = ["A", "B", "C" , "D", "E"];
            var $i = 0;

            for(var response in responses){
                console.log(response.correct);
                if(response.correct) {
                    break;
                }
                $i++;
            }

            return mapping[$i+1];
          },

jsfiddle Link

Answer 1

我无法发表评论，因此只能在这里提出我的建议。首先，由于客户或用户的不信任，我敢打赌您正在使用某种后端api进行标记。也就是说，每次单击“提交”按钮时，您都会发送api请求。因此，现在这里是您要与要实现的目标集成的地方，在访问后端时，json响应将包含问题以及正确选择的答案，现在在循环中，您可以根据以下内容显示div的值（正确和错误）提供的答案的正确性。

步骤：

显示问题
标记问题（后端）
现在以答案状态（错误或正确）显示问题
根据答案状态显示正确或错误的内容

Vue.js在提交后显示答案

1 个答案: