Monaca Onsen UI Discord Chat Github Repo

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">
    					{{$indexParent + 1}}.{{ questionnaire['doc'].question }}
    				<v-ons-list modifier="inset">
    						:name="'question-' + $indexParent"
    						v-for="(choice, key, $index) in questionnaire['doc']['choices']"
    						<label class="left">
    								:input-id="$indexParent + '-' + $index"
    						<label class="center" :for="$indexParent + '-' + $index">
    			<section style="margin:16px">
    				<v-ons-button modifier="cta" @click="submit">Submit</v-ons-button>
    	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;

  • Onsen UI

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