vue单选框选中_【vue+elementui】el-radio单选框默认选中以及v-model绑定值问题

难度值:⭐

需求描述:

弹窗里面的表单,是复用的后台返回数据,输入框里面的数据复用很容易,通过prop属性即可。

问题在于radio单选框,怎么将后台给的数值绑定为默认值

示例效果图:

涉及知识:

一、【elment-ui】radio 单选框中的 label 属性

误区:

1、误以为 value 是返回给后台的值,label 是展示在前端页面的值

导致红色框框里面的代码书写成,后台需要的单选框isGroupcompany参数值是数值,这种写法导致传递的值为label里面的是&否,而不是value里面的值,不符合接口传值需求;将label的值修改为1&2,导致前端页面展示效果也由是/否变为1/2,因此也不符合前端展示需求

二、【vue】属性绑定 v-bind ,简写:

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

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

补充:

本案例中,后台给的字段值是数值,但是前端呈现效果应该是中文文本,如:1->是 2->否

解决方法?

1、请求接口的时候,将字段值进行映射后再展示

this.tableData.list.map(v => (v.isGroupcompany = v.isGroupcompany === 1 ? '是' : '否'))

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

this.form.isGroupcompany = this.form.isGroupcompany === '是' ? 1 : 2

类似案例效果:

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

你可能感兴趣的:(vue单选框选中)