如果我的 v-model 是一个数组,我如何检查 v-for 中的单选按钮?
我的数据:
data() {
return {
persons: {
name: [],
surname: [],
sex: [],
}
}
}
还有我的 radio :
<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 中的每个人中检查我的第一个 radio (男性)
最佳答案
如果我没有误解你的问题和你的目标,你为多人做动态表格,那么试试这样
模板
//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
Database Storage / ISO 5218或虚拟变量。 Here's explanation
关于vue.js - Vuejs 单选按钮检查 v-model 是否为数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51687443/