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.


Log in to reply