VueJS: Passing data to methods using vuejs - vue.js

Question

This is my code for my html in App.vue file.
<b-form #submit="onSubmit">
<b-form-group>
**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>
</b-form>
*** script ***
export default {
data() {
return {
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: {
q1: "Hyper text transfer protocol",
q2: "HTML"
},
methods: {
onSubmit(event) {
event.preventDefault();
var score = 0;
for (var key of Object.keys(this.responses)) {
console.log(key + " -> " + this.responses[key]);
//displays the answers of the users
**trying to compare the answers from my answersheet but keeps saying undefined**
if (this.responses[key] == this.answersheet[key]) {
score = score + 1;
}
}
displays score to console
console.log(score);
}
}
What I'm trying to do here is to calculate the number of correct answers and then send the result to an api, but my code won't work.
I'm still a noob with vuejs and this is my first project for my class.

Answer 1

I've made some points and made some changes on your code
You needed to make sure opening and closing brackets written
Check indexes and make sure you are comparing right values
Read documentation carefully and try to follow getting started instructions. It gives you quite good orientation.
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>