Radio buttons not working correctly in Vue.js

Question

I have generated multiple radio button groups in a page.Each group consists of two items - yes and no

<div v-if="row.answer_input_type === 'Radio Button'">
                            <template v-for="answer in answers" >
                                <template v-if="answer.AnswerTypeID === row.answer_type_id">
                                   <template v-for="answerdesc in answer.AnswerDescription">
                                       <p>{{answerdesc.AnswerMasterID}}</p>
                                       <input type="radio" v-bind:value="answerdesc.AnswerMasterID" v-bind:name="row.question_id" v-bind:id="answerdesc.AnswerMasterID" v-bind:disabled="row.is_enabled == 1 ? false : true" v-on:click="rdoClick(row.question_id, answerdesc.AnswerMasterID)" v-model="answer.selected_option" />
                                       <label v-bind:for="answerdesc.AnswerMasterID">{{answerdesc.AnswerDescription}}</label>
                                   </template>
                                </template>
                             </template>
                        </div>

but whenever the selection is changed in a radio button group, the same is reflected in all the other radio button groups. That is if I select yes in one group in all the other group yes is selected. But the v-model is different for each. How to solve/correct this? thanks

also check that row.question_id is different for each answer group — Roy J
– Roy J, Commented Apr 25, 2017 at 11:10
What happens if you remove the v-on:click? You shouldn't need that with v-model — Roy J
– Roy J, Commented Apr 25, 2017 at 11:51
We're going to need to see a minimal amount of your data that exhibits the problem: at least two answer groups and the associated row data. — Roy J
– Roy J, Commented Apr 25, 2017 at 12:34

Shreekanth · Accepted Answer · 2020-01-10 09:25:49Z

4

Use name attribute for radio buttons as shown in below code and your radio buttons should be in form.
Eg: name="gender"

<form action="post">
    <div>
        <div class="label">Gender <span class="required">*</span></div>
        <label>
            <input type="radio" required name="gender" v-model="gender" value="F">F
        </label>
        <label>
            <input type="radio" required name="gender" v-model="gender" value="M">M
        </label>
    </div>
    <button type="button">Submit</button>
</form>

edited Jan 10, 2020 at 9:25

answered Nov 28, 2019 at 10:54

Shreekanth

8591 gold badge10 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rhea · Accepted Answer · 2017-04-25 11:57:35Z

2

radio button works on name basis. and your name seems to be the same for a group and different for different answer groups.

answered Apr 25, 2017 at 11:57

Rhea

6441 gold badge5 silver badges15 bronze badges

3 Comments

sm12 Over a year ago

no name for each radio button group is dufferent. The name for each id the qestion id of the current row. Question id is different fo every row

sm12 Over a year ago

do I need to give the same name for all radio button groups? Would'nt that make it one radio button group?

Rhea Over a year ago

no. elements one group needs to ahave the same name.

tony19 · Accepted Answer · 2022-07-15 04:43:17Z

0

Vue tries to render elements as efficiently as possible, often re-using them instead of rendering from scratch.

This isn’t always desirable, so Vue offers a way for you to say, “elements are completely separate - don’t re-use them.” To do this, add a key attribute with unique values.

Read here for more infor: https://v2.vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key

edited Jul 15, 2022 at 4:43

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 25, 2018 at 12:58

fasaway

1

1 Comment

Jay Over a year ago

Just tried this. Doesn't solve the problem of radio buttons not correctly grouping in vue2, despite all groups having a different group name.

Collectives™ on Stack Overflow

Radio buttons not working correctly in Vue.js

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related