一、单选框Radio
单选框是iview的基本组件之一，主要用于一组可选项的单项选择；
官方写法：
<template>
<RadioGroup v-model="animal">
<Radio label="金斑蝶"></Radio>
<Radio label="爪哇犀牛"></Radio>
<Radio label="印度黑羚"></Radio>
</RadioGroup>
</template>
<script>
export default {
data () {
return {
animal: '爪哇犀牛'
}
}
}
</script>
实际操作中，iview和vue一起使用，我们通常传入一个数组，通过v-for循环出来，并通过v-model实现数据的双向绑定，像这样：
<template>
<RadioGroup v-model="chosenOrder" @on-change="changeModel">
<Radio v-for="item in workOrderList" :label="item.label" :key="item.value"></Radio>
</RadioGroup>
</template>
<script>
export default {
data() {
return {
workOrderList:[
{
label:'保修',
value:'warranty'
},{
label:'售后整机保修',
value:'aftersalewarranty'
},{
label:'软件维修',
value:'softrepair'
},{
label:'付费维修',
value:'payrepair'
},
],
chosenOrder:'',
}
}
}
</script>
在此时就会发现我们一般在前端展现的是label字段，为中文或者用户可以理解的含义，而在后台提交时需要提交value字段，但是按照这种写法，当我们选中时向后台提交的依旧是label字段，如图：
选中效果图
后台打印图
如何才能既获取label又能获取value？
<template>
<RadioGroup v-model="chosenOrder" @on-change="changeModel">
<Radio v-for="item in workOrderList" :label="item.value" :key="item.value">
<span>{{item.label}}</span>
</Radio>
</RadioGroup>
</template>
选中label
获取value
