javascript - Radio buttons not working correctly in Vue.js - Stack Overflow

admin管理员组

文章数量:1315313

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

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

• javascript
• radio-button
• vue.js

Share Improve this question Follow asked Apr 25, 2017 at 10:04 sm12sm12 12544 silver badges1616 bronze badges 7

• please post your 'answers' object. – Deepak Commented Apr 25, 2017 at 11:03
• also check that row.question_id is different for each answer group – Roy J Commented Apr 25, 2017 at 11:10
• @RoyJ row.question is different for each one – sm12 Commented Apr 25, 2017 at 11:41
• What happens if you remove the v-on:click? You shouldn't need that with v-model – Roy J Commented Apr 25, 2017 at 11:51
• 1 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 Commented Apr 25, 2017 at 12:34

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 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>

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

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 pletely separate - don’t re-use them.” To do this, add a key attribute with unique values.

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

本文标签： javascriptRadio buttons not working correctly in VuejsStack Overflow