Bind a class on list item
-
Hello there. I am implementing a list of questions with radio buttons as the choices for the answers. What I want to do is to bind a class or style (e.g border: solid; borderColor: green) for the border of the chosen answer, if it is correct or wrong.
Here is my code.
<v-ons-list v-for="(questionnaire, $indexParent) in questionnaires"> <v-ons-list-header> {{$indexParent + 1}}.{{ questionnaire['doc'].question }} </v-ons-list-header> <v-ons-list modifier="inset"> <v-ons-list-item modifier="longdivider" :name="'question-' + $indexParent" v-for="(choice, key, $index) in questionnaire['doc']['choices']" :key="key" tappable > <label class="left"> <v-ons-radio :input-id="$indexParent + '-' + $index" :value="key" v-model="chosenAnswers[$indexParent]" > </v-ons-radio> </label> <label class="center" :for="$indexParent + '-' + $index"> {{key}}.{{choice}} </label> </v-ons-list-item> </v-ons-list> </v-ons-list> <section style="margin:16px"> <v-ons-button modifier="cta" @click="submit">Submit</v-ons-button> </section>
data() { return { questionnaires: [], chosenAnswers: [], correct: [] } } methods: { submit() { var total = 0; for(var i = 0; i < this.questionnaires.length; i++) { if(this.chosenAnswers[i] == this.questionnaires[i]['doc'].correctAnswer) { total += 1; } } } }
-
@jayGorio What’s the issue exactly? Doesn’t it work something like
:class="isCorrect(index) ? 'correct' : 'wrong'"
-
@Fran-Diox Thanks for the response. I want to achieve this https://ibb.co/m5wiba. What I did was upon clicking the submit button all the answers are being checked using the submit method. How will I bind now the class on the v-ons-list. Can you please help me how to achieve this.