[Vuejs]-VueJS: Passing data to methods using vuejs

by

0👍

I’ve made some points and made some changes on your code

  1. You needed to make sure opening and closing brackets written
  2. Check indexes and make sure you are comparing right values
  3. Read documentation carefully and try to follow getting started instructions. It gives you quite good orientation.
  4. Have fun
new Vue({
  el: '#app',
  data() {
    return {
      isSubmitted: false,
      score: 0,
      responses: {},
      questionsList: [
        {
          id: "1",
          question: "What is the full form of HTTP?",
          responses: [
            { options: "Hyper text transfer package" },
            { options: "Hyper text transfer protocol" }            
          ],
        },
        {
          id: "2",
          question: "HTML document start and end with which tag pairs?",
          responses: [
            { options: "HTML" },
            { options: "WEB" }            
          ],
        },
      ],
      answersheet: {
        question0: "Hyper text transfer protocol",
        question1: "HTML" 
      },
    };
  },
  methods: {
    tryAgain() {
      this.responses = {};
      this.score = 0;
      this.isSubmitted = !this.isSubmitted;
    },
    onSubmit() {
      for (var key of Object.keys(this.responses)) {
        console.log(key + " -> " + this.responses[key]);
        if (this.responses[key] == this.answersheet[key]) {
          this.score++;
        }
      }
      this.isSubmitted = !this.isSubmitted

    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.css" rel="stylesheet" />


<script src="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-form @submit.prevent="onSubmit">
    <b-form-group v-if="!isSubmitted">
      <!-- nested v-model binding** -->
      <div v-for="(question, index) in questionsList" :key="question.question">
        <h4>{{question.question}}</h4>
        <div v-for="options in question.responses" :key="options.options">
          <input
            type="radio"
            :name="'question'+index"
            :value="options.options"
            v-model="responses['question'+index]"
           />
          {{options.options}}
          <br />
        </div>
      </div>
      <b-button variant="outline-primary" type="submit">Submit</b-button>
    </b-form-group>
    <div v-else>
      Your score: {{ score}}
      <br>
      <b-button variant="outline-primary" @click="tryAgain">Try Again</b-button>
    </div>
  </b-form>
</div>

Leave a comment