vue element-ui Radio单选框默认值选不中的原因:混用字符和数字
先贴灵感来源:添加链接描述**问题描述:**在写编辑信息弹窗时,性别的值一直不能根据v-model的值选中,但是用{{editForm.sex}}是能正确打印出单选框的label值的。以下是我的代码:模板:<el-radio-group v-model="editForm.sex"><el-radio class="radio" :label=...
·
总结:
: 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-开头的自定义属性
更多推荐
已为社区贡献4条内容
所有评论(0)