单选框 （vue3)

一 总结 

 <el-form-item label="称谓">
                <el-radio-group v-model="company.contactGender">
                  <el-radio :label="1" size="large">男</el-radio>
                  <el-radio :label="2" size="large">女</el-radio>
                </el-radio-group>
              </el-form-item>

传的是数字1，2 

: label=“1”：表示label的值应为数字1 

label=“1”：表示label的值应为字符串1

二 问题描述

模板：

1 2 3 4

<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>

数据结构：

1 2 3 4 5 6

//编辑界面数据 editForm: {   id: 0,   name: '',   sex: -1, },

数据：

1 2 3 4

tableData: [   {name:'tom',sex:‘1'},   {name:'cat',sex:‘0'}, ],

结果发现，是因为我定义的数据sex的字段为数字，而数据的sex值为字符串，两者不匹配，于是该Radio单选框组件默认值就选不中。

只要将数据中sex改为数字即可。

1 2 3 4

tableData: [   {name:'tom',sex:1},   {name:'cat',sex:0}, ],

三 分析原因

: label=“xx” vue特有的v-bind用于动态绑定class、对象和数组，所以原封不动解析出所填内容（否则数组加引号就变成字符串了）

label=“1”，vue支持自定义属性，不会被vue解析，所以label的值就是"1"。