javascript - 如何使用 V-Model 检查 Vue.js 中的单选按钮？

Question

我是 laravel 和 vue.js 的新手。我正在开发一个简单的在线考试，如果他/她单击上一个按钮，我很难显示用户的答案。

这是我使用 v-for 循环问题的模板：

 <div class="myQuestion" v-for="(question, index) in questions" :key="index + uuid">
      <div class="row">
        <div class="col-md-6">
          <blockquote >
            Total Questions &nbsp;&nbsp;{{ index+1 }} / {{questions.length}}
          </blockquote>
          <h2 class="question">Q. &nbsp;{{question.question}}</h2>
          <form class="myForm" action="/quiz_start" v-on:submit.prevent="createQuestion(question.question_id, question.answer, auth.id, question.topic_id)" method="post">
            <input class="radioBtn" v-bind:id="'radio'+ index" type="radio" v-model="result.user_answer" value="A" aria-checked="false" > <span>{{question.a}}</span><br>
            <input class="radioBtn" v-bind:id="'radio'+ index+1" type="radio" v-model="result.user_answer" value="B" aria-checked="false"> <span>{{question.b}}</span><br>
            <input class="radioBtn" v-bind:id="'radio'+ index+2" type="radio" v-model="result.user_answer" value="C" aria-checked="false"> <span>{{question.c}}</span><br>
            <input class="radioBtn" v-bind:id="'radio'+ index+3" type="radio" v-model="result.user_answer" value="D" aria-checked="false"> <span>{{question.d}}</span><br>
            <div class="row">
              <div class="col-md-6 col-xs-8">
                <button type="submit" class="btn btn-wave btn-block nextbtn">Next</button>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6 col-xs-8">
                <button type="submit" class="btn btn-wave btn-block prebtn">Previous</button>
              </div>
            </div>
          </form>
        </div>
       </div>
      </div>

这是我获取数据并将数据数组插入问题变量的脚本。

<script>
import { v4 as uuidv4 } from 'uuid';
export default {

  props: ['topic_id'],

  data () {
    return {
      questions: [],
      answers: [],
      uuid:0,
      result: {
        question_id: '',
        answer: '',
        user_id: '',
        user_answer:0,
        topic_id: '',
      },
      auth: [],
    }
  },

  created () {
    this.fetchQuestions();
  },

  methods: {

    fetchQuestions() {
      this.$http.get(`${this.$props.topic_id}/quiz/${this.$props.topic_id}`).then(response => {
        this.questions = response.data.questions;
        this.auth = response.data.auth;
        this.uuid=uuidv4();
        console.log(this.questions);
      }).catch((e) => {
        console.log(e)
      });
    },

    createQuestion(id, ans, user_id, topic_id) {
      this.result.question_id = id;
      this.result.answer = ans;
      this.result.user_id = user_id;
      this.result.topic_id = this.$props.topic_id;
      this.$http.post(`${this.$props.topic_id}/quiz`, this.result).then((response) => {
        console.log(response.data.message);
        let newdata=response.data.newdata;
        this.questions.splice(newdata[0]["index"],1,newdata[0]);
      }).catch((e) => {
        console.log(e);
      });
      this.result.topic_id = '';
      this.result.user_answer =0;
    }
  }
}
</script>

我使用 jQuery next() 和 prev() 作为下一个和上一个按钮。在问题变量中，我存储了数据库中包含问题和选择的对象数组，因此在用户单击下一步后，它将更新问题元素以插入用户选择的答案。我的问题是，如果显示的问题已经被用户回答，我如何检查用户默认选择的答案。这是用户想要在完成考试之前查看他/她的答案的时间。

标签： javascriptphplaravelvue.js