如何从具有相同v型名称的多个单选按钮中获取单选按钮值

Question

如何通过相同的v-model名称从多个单选按钮中获取值
我希望我只能为每个学生检查一个按钮，并将其值放入info[]数组中。

new Vue({
el: "#app",
data: {
info: [],
student_id: [
{ name: 'Andrew', student_id: '52346' },
{ name: 'Mathew', student_id: '86975' },
{ name: 'Max', student_id: '78654' },
{ name: 'Jhon', student_id: '36589' },
{ name: 'Flam', student_id: '74859' },
{ name: 'Meli', student_id: '62398' }
]
},
methods: {
submit() {
console.log(this.info)
}
}
})

body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}

<div id="app">
<v-container>
<form @submit.prevent="submit">
<div v-for="(id,i) in student_id" class="pa-3">
<span class="blue--text">{{id.name}}</span>
<br />
<input type="radio" :name="`${id.name}`" v-model="info" :value="`${id.student_id}-P`" /> Present
<input type="radio" v-model="info" :name="`${id.name}`" :value="`${id.student_id}-A`" /> Absent
<input type="radio" v-model="info" :name="`${id.name}`" :value="`${id.student_id}-L`" /> Late
<hr />
</div>
<v-btn color="success" type="submit">Submit</v-btn>
</form>
</v-container>
</div>

JSFiddle 视图

Answer 1

new Vue({
el: "#app",
data: {
student_id: [{
name: 'Andrew',
student_id: '52346',
value: ''
},
{
name: 'Mathew',
student_id: '86975',
value: ''
},
{
name: 'Max',
student_id: '78654',
value: ''
},
{
name: 'Jhon',
student_id: '36589',
value: ''
},
{
name: 'Flam',
student_id: '74859',
value: ''
},
{
name: 'Meli',
student_id: '62398',
value: ''
}
]
},
computed: {
info() {
return this.student_id.map(item => item.value)
}
},
methods: {
submit() {
console.log(this.info)
}
}
})

body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<v-container>
{{info}}
<form @submit.prevent="submit">
<div v-for="(id,i) in student_id" class="pa-3">
<span class="blue--text">{{id.name}}</span>
<br />
<input type="radio" :name="`${id.name}`" v-model="id.value" :value="`${id.student_id}-P`" /> Present
<input type="radio" v-model="id.value" :name="`${id.name}`" :value="`${id.student_id}-A`" /> Absent
<input type="radio" v-model="id.value" :name="`${id.name}`" :value="`${id.student_id}-L`" /> Late
<hr />
</div>
<v-btn color="success" type="submit">Submit</v-btn>
</form>
</v-container>
</div>

将每个无线电组的值放在数组中的对象中，然后用computed计算选定的值。