Vuejs radio buttons checked if v-model is an array
If I don't misunderstood your question and your objective, your doing dynamic forms for multiple persons then try like this
Template
//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>
Script (just an example to show its checked)
data() { return { noOfPersons: 2, persons: [ {name: '', surname: '', sex: 'male'}, {name: '', surname: '', sex: 'female'}, ] }}
For those using Vuetify.js (it's different approach with v-model
on the v-radio-group
wrapper)
<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>
Here's the Code Pen
NOTE. It is recommended to use binary (0/1)
data like 0
for male
or 1
for female
or other numbers like 1/2
Database Storage / ISO 5218 or dummy variables. Here's explanation