vue+elementuiel-radio单选框默认选中以及v-model绑定值问题

需求描述：

弹窗里面的表单，是复用的后台返回数据，输入框里面的数据复用很容易，通过prop属性即可。
问题在于radio单选框，怎么将后台给的数值绑定为默认值


文章目录

  • vue+elementuiel-radio单选框默认选中以及v-model绑定值问题
  • 需求描述：
  • 示例效果图：
  • 涉及知识：
  • 补充：
  • 类似案例效果：


示例效果图：

Android RadioGroup 默认不选 radio设置默认选中_html

涉及知识：

一、【elment-ui】radio 单选框中的 label 属性
误区：
1、误以为 value 是返回给后台的值，label 是展示在前端页面的值
导致红色框框里面的代码书写成，后台需要的单选框studentByEdit.studentSex参数值是数值，这种写法导致传递的值为label里面的是&否，而不是value里面的值，不符合接口传值需求；将label的值修改为1&0，导致前端页面展示效果也由是/否变为1/0，因此也不符合前端展示需求

<el-form-item label="请选择性别" :label-width="formLabelWidth">
  <el-radio-group v-model="v-model="studentByEdit.studentSex">
    <el-radio label="男" value="1"></el-radio>
    <el-radio label="女" value="0"></el-radio>
  </el-radio-group>
</el-form-item>

二、【vue】属性绑定 v-bind ，简写:
上面的写法以及问题推测，证实了 value 这个属性值放在radio里面没多大作用，在radio单选框里面 lable 相当于 radio 的 value，由此删除掉上述代码中的value属性，调整为label绑定接口定义好的数值类型，前端展示的中文文本是&否直接写在标签中间

<el-form-item label="请选择性别" :label-width="formLabelWidth">
  <el-radio-group v-model="v-model="studentByEdit.studentSex">
    <el-radio label="1">男</el-radio>
    <el-radio label="2">女</el-radio>
  </el-radio-group>
</el-form-item>

修整为上述代码后，发现还是 radio 单选框 还是没有选中后台返回的默认值，原因在于，上面 lable=“1” 这种写法数据是固定的，但是需要的是后台返回的动态数据，所以需要用到 v-bind，即 :lable=“1”

<el-form-item label="请选择性别" :label-width="formLabelWidth">
  <el-radio-group v-model="v-model="studentByEdit.studentSex">
    <el-radio :label="1">男</el-radio>
    <el-radio :label="2">女</el-radio>
  </el-radio-group>
</el-form-item>

补充：

本案例中，后台给的字段值是数值，但是前端呈现效果应该是中文文本，如：1->是 2->否
解决方法？
1、请求接口的时候，将字段值进行映射后再展示

this.tableData.list.map(v => (v.studentByEdit.studentSex= v.studentByEdit.studentSex=== 1 ? '男' : '女'))

2、将前端页面映射后呈现的中文文本，转义成数值再传给后台

this.form.studentByEdit.studentSex= this.form.studentByEdit.studentSex=== '男' ? 1 : 0

类似案例效果：

switch 开关按钮默认选中以及绑定值问题

<el-switch v-model="updateForm.status" @change="changeOpen" :active-value="1" :inactive-value="0"></el-switch>