TimiAde's avatar

Multiple radio button with v-show in vue

Am building a quiz app with a question will show based on the index with methods next() and previous() to increment and decrement the index.

<div v-show="key === pageNumber">
            <p>{{key}} {{item.the_question}}</p>
            <ul>
                <fieldset id="key">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="key" id="flexRadioDefault1"  @click="check(key,'A',item.answer.correct_option)">
                    <label class="form-check-label" for="flexRadioDefault1">
                        {{item.options.option_a}}
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="key" id="flexRadioDefault1"  @click="check(key,'B',item.answer.correct_option)">
                    <label class="form-check-label" for="flexRadioDefault1">
                        {{item.options.option_b}}
                    </label>
                </div>
</fieldset>
                
            </ul>
            </div>

The previous checked radio button unchecks itself i think because of v-show. how can i make it stay checked when in the next or previous question.

0 likes
1 reply
click's avatar

if two radiogroup inputs belong to each other they should have the same name. But if they do not belong to each other they should not have the same name. I assume all of your radiobuttons are called "key", so whenever you click on a radiobutton answer all the other radiobuttons are unselected automatically again, this is not related to VueJS, this is default behavior of radiobuttons.

So you should set a unique name for name and maybe you can take a look at the v-model behavior as that might help keeping track of the answers.

Alternatively, it might work if you change v-show to v-if. However, this might have other consequences for your VueJS component behavior. See https://vuejs.org/guide/essentials/conditional.html for the difference between the two.

The difference is that an element with v-show will always be rendered and remain in the DOM; v-show only toggles the display CSS property of the element.

Please or to participate in this conversation.