vue?element-ui?Radio單選框默認值選不中的原因:混用字符和數(shù)字問題
更新時間：2023年12月02日 11:03:49 作者：閉曈彤
這篇文章主要介紹了vue?element-ui?Radio單選框默認值選不中的原因:混用字符和數(shù)字問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
先說下總結
: label=“1”：表示label的值應為數(shù)字1
label=“1”：表示label的值應為字符串1
問題描述
在寫編輯信息彈窗時，性別的值一直不能根據(jù)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>
數(shù)據(jù)結構：
//編輯界面數(shù)據(jù)
editForm: {
id: 0,
name: '',
sex: -1,
},
數(shù)據(jù)：
tableData: [
{name:'tom',sex:‘1'},
{name:'cat',sex:‘0'},
],
結果發(fā)現(xiàn)，是因為我定義的數(shù)據(jù)sex的字段為數(shù)字，而數(shù)據(jù)的sex值為字符串，兩者不匹配，于是該Radio單選框組件默認值就選不中。
只要將數(shù)據(jù)中sex改為數(shù)字即可。
tableData: [
{name:'tom',sex:1},
{name:'cat',sex:0},
],
分析原因
翻閱vue文檔未專門提及該問題，以下是自己的總結。
: label=“xx” vue特有的v-bind用于動態(tài)綁定class、對象和數(shù)組，所以原封不動解析出所填內容（否則數(shù)組加引號就變成字符串了）
label=“1”，vue支持自定義屬性，不會被vue解析，所以label的值就是"1"。
注：原生html不支持，只支持以data-開頭的自定義屬性
好了，以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue基于iview table展示圖片實現(xiàn)點擊放大
這篇文章主要介紹了Vue基于iview table展示圖片實現(xiàn)點擊放大,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
本篇文章主要介紹了詳解vue 模版組件的三種用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了Vue全局變量局部變量，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
vue如何設置動態(tài)的柵格占位、水平偏移量、類名、樣式
這篇文章主要介紹了vue如何設置動態(tài)的柵格占位、水平偏移量、類名、樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在項目中,實現(xiàn)不同用戶的權限控制是常見的需求也是常見的功能模塊,本文將以 vue 為主要的代碼框架介紹幾種常見的權限控制方式,有需要的可以了解下2025-03-03
本文主要介紹了Vue.js實現(xiàn)對視頻預覽的示例代碼,通過監(jiān)聽文件選擇事件和使用FileReader API,可以實現(xiàn)視頻文件的預覽功能,感興趣的可以了解一下2025-01-01
基于Vue3+Three.js實現(xiàn)一個3D模型可視化編輯系統(tǒng)
這篇文章主要介紹了基于Vue3+Three.js實現(xiàn)一個3D模型可視化編輯系統(tǒng),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
Node.js使用orm2進行update操作時關聯(lián)字段無法修改的解決方法
這篇文章主要給大家介紹了Node.js使用orm2進行update操作時關聯(lián)字段無法修改的解決方法，文中給出了詳細的示例代碼供大家參考學習，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
這篇文章主要為大家詳細介紹了Vue實現(xiàn)附件上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了vue實現(xiàn)select下拉顯示隱藏功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09