Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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.