iview组件(一)Radio获取label与value

一、单选框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