Bind a class on list item

[jayGorio]

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;

				}
			}

		}
	}

[Fran Diox]

@jayGorio What’s the issue exactly? Doesn’t it work something like :class="isCorrect(index) ? 'correct' : 'wrong'"

[jayGorio]

@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.