vue element-ui Radio单选框默认值选不中的原因:混用字符和数字问题
更新时间：2023年12月02日 11:03:49 作者：闭曈彤
这篇文章主要介绍了vue element-ui Radio单选框默认值选不中的原因:混用字符和数字问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
先说下总结
: label=“1”：表示label的值应为数字1
label=“1”：表示label的值应为字符串1
问题描述
在写编辑信息弹窗时，性别的值一直不能根据v-model的值选中，但是用{{editForm.sex}}是能正确打印出单选框的label值的。
以下是我的代码
模板：
<el-radio-group v-model="editForm.sex">
<el-radio class="radio" :label="1">男</el-radio>
<el-radio class="radio" :label="0">女</el-radio>
</el-radio-group>
数据结构：
//编辑界面数据
editForm: {
id: 0,
name: '',
sex: -1,
},
数据：
tableData: [
{name:'tom',sex:‘1'},
{name:'cat',sex:‘0'},
],
结果发现，是因为我定义的数据sex的字段为数字，而数据的sex值为字符串，两者不匹配，于是该Radio单选框组件默认值就选不中。
只要将数据中sex改为数字即可。
tableData: [
{name:'tom',sex:1},
{name:'cat',sex:0},
],
分析原因
翻阅vue文档未专门提及该问题，以下是自己的总结。
: label=“xx” vue特有的v-bind用于动态绑定class、对象和数组，所以原封不动解析出所填内容（否则数组加引号就变成字符串了）
label=“1”，vue支持自定义属性，不会被vue解析，所以label的值就是"1"。
注：原生html不支持，只支持以data-开头的自定义属性
好了，以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue基于iview table展示图片实现点击放大,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
本篇文章主要介绍了详解vue 模版组件的三种用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了Vue全局变量局部变量，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue如何设置动态的栅格占位、水平偏移量、类名、样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
在项目中,实现不同用户的权限控制是常见的需求也是常见的功能模块,本文将以 vue 为主要的代码框架介绍几种常见的权限控制方式,有需要的可以了解下2025-03-03
本文主要介绍了Vue.js实现对视频预览的示例代码,通过监听文件选择事件和使用FileReader API,可以实现视频文件的预览功能,感兴趣的可以了解一下2025-01-01
基于Vue3+Three.js实现一个3D模型可视化编辑系统
这篇文章主要介绍了基于Vue3+Three.js实现一个3D模型可视化编辑系统,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
这篇文章主要给大家介绍了Node.js使用orm2进行update操作时关联字段无法修改的解决方法，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
这篇文章主要为大家详细介绍了Vue实现附件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了vue实现select下拉显示隐藏功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
最新评论