首页 element-ui Radio 单选框组件默认值选不中?

element-ui Radio 单选框组件默认值选不中?

jaeheng 2019-02-12 03:34:03 5 9038

问题描述

element-ui Radio 单选框组件设置了默认值(直接写在数据模型中,或者由接口返回),界面上却没有选中,有时候还会造成单选框点击无效果,这是为什么呢?。

这通常是由于数据类型的问题导致,如数字/布尔等类型,问题常见于单选框回显,如性别选择

案例解析

比如我们有个需求是要选择性别,并且默认选中男,通常组件是这样写的:


<template>
  <el-radio v-model="gender" label="1">男</el-radio>
  <el-radio v-model="gender" label="0">女</el-radio>
</template>


我们用1代表,0代表,因为label前面没有加冒号,此时label是字符串1、0, 如果我们的数据模型gender设置的默认值,或赋值给gender的请求返回值是数字1,则该Radio单选框组件就会出现选不中的情况

解决办法

我们只要保证label的值和数据模型gender的值完全一样即可,包括数据类型。

总结

请求中为数字/布尔的字段要多加注意,类型问题会导致很多bug出现。

在一些v-if判断是时候也会出现这个问题,多注意数据类型


发表评论

评论列表:

种田
2019-08-08 10:02
赞,困扰多时,终于解决了
jaeheng
2019-08-08 10:03
@种田:也困扰了我多时
tom
2019-06-25 21:53
真棒,终于解决了我的问题,特此留言感谢
2019-04-13 23:09
如此好文章一定要留下名啊
2019-04-02 23:57
虽然不知道说的是什么,但看起来好厉害的样子!