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.

Log in to reply