单选按钮在 Vue.js 中无法正常工作

Question

我在一个页面中生成了多个单选按钮组。每个组包含两项 - yes 和 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>

但是，无论何时更改单选按钮组中的选择，都会在所有其他单选按钮组中反映出来。也就是说，如果我在所有其他组中的一个组中选择是，则选择是。但是每个人的 v-model 都是不同的。如何解决/纠正这个问题？谢谢

Answer 1

使用name attribute 作为单选按钮，如下面的代码所示，您的单选按钮应该是形式。
例如：name="性别"

<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>

Answer 2

单选按钮基于名称工作。并且您的name 对于一个组来说似乎是相同的，而对于不同的答案组来说是不同的。

Answer 3

Vue 尝试尽可能高效地渲染元素，经常重复使用它们而不是从头开始渲染。

这并不总是可取的，因此 Vue 提供了一种方式让您说，“元素是完全独立的 - 不要重复使用它们。”为此，请添加具有唯一值的键属性。

阅读此处了解更多信息：https://vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key