element-ui的radio单选框动态渲染

需求描述

• 根据后台返回的数据进行默认值绑定单选框选中

错误示例/分析（一）

• 误认为value是绑定后端返回的数据,导致默认值无法自动选中单选框

<el-form-item>
    <el-radio v-model="groupType" value="1">单选</el-radio>
    <el-radio v-model="groupType" value="2">多选</el-radio>
</el-form-item> 

错误示例/分析（二）

• label ：表示Radio 的 实际绑定的值，用于绑定接口定义好的数据类型

• value ：在这里面并没有太大作用，不能用于绑定接口定义好的数据类型，所以这里就不加这个属性啦~

• 修整为以下代码后，发现 radio 单选框还是没有选中后台返回的默认值，原因在于里面lable=“1”

<el-form-item>
    <el-radio v-model="groupType" label="1">单选</el-radio>
    <el-radio v-model="groupType" label="2">多选</el-radio>
</el-form-item> 

这种写法数据是固定的，但是我们需要的是后台返回的动态数据，所以需要用到 v-bind，即 :lable=“1”

正确做法

<el-form-item>
    <el-radio v-model="groupType" :label="1">单选</el-radio>
    <el-radio v-model="groupType" :label="2">多选</el-radio>
</el-form-item> 

拓展：

radio单选框的写法有多种，也可以在当前所有el-radio外层套上el-radio-group，使用v-model同时绑定上单选框的值，这样就无须在每一个单独的el-radio标签上再去绑定v-model的值。

本文主要要注意的是radio的label值才是用户绑定后台定义的数据类型而不是value，其次是v-bind的正确使用。