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.

Bind a class on list item browsing