vue element-ui Radio单选框默认值选不中的原因:混用字符和数字

5 篇文章 0 订阅

总结:
: 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-开头的自定义属性

  • 23
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 14
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值