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