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 create 創(chuàng)建項(xiàng)目只有兩個(gè)文件問題
這篇文章主要介紹了解決vue create 創(chuàng)建項(xiàng)目只有兩個(gè)文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue使用echarts實(shí)現(xiàn)折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue3在單個(gè)組件中實(shí)現(xiàn)類似mixin的事件調(diào)用
這篇文章主要為大家詳細(xì)介紹了vue3如何在單個(gè)組件中實(shí)現(xiàn)類似mixin的事件調(diào)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章主要介紹了vue引入cesium問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
甘特圖是一種條狀圖,直觀展示項(xiàng)目進(jìn)展隨時(shí)間的走勢(shì)及聯(lián)系,其中,項(xiàng)目時(shí)間由橫軸表示,項(xiàng)目活動(dòng)由縱軸表示,本文給大家介紹了Vue echarts繪制甘特圖的實(shí)現(xiàn)方法,并有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-03-03
element-ui table span-method(行合并)的實(shí)現(xiàn)代碼
element-ui官網(wǎng)中關(guān)于行合并的例子是根據(jù)行號(hào)進(jìn)行合并的，這顯然不符合我們?nèi)粘ｉ_發(fā)需求，因?yàn)橥ǔＮ覀僼able中的數(shù)據(jù)都是動(dòng)態(tài)生成的，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-12-12
nginx+vue.js實(shí)現(xiàn)前后端分離的示例代碼
這篇文章主要介紹了nginx+vue.js實(shí)現(xiàn)前后端分離的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
Vue在線預(yù)覽Excel和Docx格式文件實(shí)現(xiàn)方式
Vue-Office是一個(gè)適用于Vue2和Vue3的Office文件格式在線預(yù)覽插件,支持Word、Excel、PDF和PowerPoint等多種文件格式,它提供了簡單集成、良好用戶體驗(yàn)和性能優(yōu)化等功能,適用于非Vue框架2025-12-12
Vue項(xiàng)目三級(jí)聯(lián)動(dòng)路由跳轉(zhuǎn)與傳參的思路詳解
這篇文章主要介紹了Vue項(xiàng)目三級(jí)聯(lián)動(dòng)的路由跳轉(zhuǎn)與傳參的思路詳解,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08