I'm currently working on creating a small quiz, but I'm facing some challenges in getting it to function properly.
My goal is to use Vue Class Binding to highlight the question that has been answered incorrectly when the 'submit' button is clicked. However, it seems like the Class Binding is not reacting as expected when the form is submitted. It only seems to work correctly after I make some changes to the values.
I have recorded a video demonstration showing the issue:
Below is the relevant piece of code:
<template>
<form @submit.prevent="handleSubmit">
<fieldset v-for="(item, questionIndex) in questions" :key="questionIndex">
<legend :class="{ wrong: isFalse[questionIndex] }">{{ item.question }}</legend>
</fieldset>
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
asyncData(context) {
return context.app.$storyapi.get('cdn/stories', {
version: 'draft',
startsWith: '/subjects/biology/hl/1999-may'
}).then(response => {
console.log(response.data.stories[0].content.question);
return {
questions: response.data.stories[0].content.question
}
});
},
data() {
return {
choices: [],
isFalse: []
}
},
methods: {
handleSubmit() {
for (let i in this.choices) {
if (this.choices[i] === this.questions[i].answer) {
this.isFalse[i] = false;
} else {
this.isFalse[i] = true;
}
}
}
}
}
</script>
<style>
.wrong {
color: red;
}
</style>