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">
    				<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;
    
    				}
    			}
    
    		}
    	}
    

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