如果v-model是一个数组，Vuejs单选按钮如何勾选？

Question

如果v-model是一个数组，Vuejs单选按钮如何勾选？

3

如果我的v-model是一个数组，我该如何在v-for中选中单选按钮？

我的数据：

data() {
     return {
         persons: {
             name: [],
             surname: [],
             sex: [],
         }
     }
 }

我的收音机：

<template v-for(person, person_index) in persons>
<div class="switch-sex">
   <input type="radio" name="sex" :id="'male'+person_index" value="male"
   v-model="persons.sex[person_index]">
   <label :for="'male' + person_index">M</label>
   <input type="radio" name="sex" :id="'female' + person_index" 
    value="female" v-model="persons.sex[person_index]">
   <label :for="'female' + person_index">F</label>
</div>
</template>

我需要在v-for中检查每个人的第一个男性广播。

- mtleppay

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gil · Accepted Answer

如果我没有误解你的问题和目标，你正在为多个人创建动态表单，那么可以尝试以下方法：

模板

 //n and index used for 0-based looping

 <div v-for="(n, index) in noOfPersons" :key="index">
     Person {{ index + 1 }}
     <div class="switch-sex">
        <input type="radio" :name="'sex'+(index+1)"  value="male" v-model="persons[index].sex">
        <label >Male {{index+1}}</label>
     </div>
     <div>
        <input type="radio" :name="'sex'+(index+1)" value="female" v-model="persons[index].sex">
        <label >Female {{index+1}} </label>
     </div>
 </div>

脚本（只是一个示例，以显示其已选中）

 data() {
    return {
        noOfPersons: 2,
        persons: [
            {name: '', surname: '', sex: 'male'},
            {name: '', surname: '', sex: 'female'},
        ]
    }
}

对于使用Vuetify.js的用户（它与v-radio-group包装器上的v-model有不同的方法）

 <v-radio-group v-model="persons[index].sex" :mandatory="false">
     <v-radio label="Male" :value="1" color="blue"></v-radio>
     <v-radio label="Female" :value="0" color="blue"></v-radio>
 </v-radio-group>

这里是Code Pen。

注意。建议使用类似于0表示男性或1表示女性的二进制（0/1）数据，或者类似于1/2数据库存储/ISO 5218或哑变量。这里有解释。