一、單選框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