快捷導(dǎo)航

vue+elementUI中el-radio設(shè)置默認(rèn)值方式

更新時(shí)間：2023年12月02日 10:42:57 作者：恩婧

這篇文章主要介紹了vue+elementUI中el-radio設(shè)置默認(rèn)值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue elementUI中el-radio設(shè)置默認(rèn)值

如果后臺(tái)返回的單選框的值是number：?jiǎn)芜x框的lable需要設(shè)置成 :lable=‘0’;

如下：

<el-form-item label="仿牌選項(xiàng)：" prop="ifCod" size="mini" class='form-label'>
 <div id='radio' >
    <el-radio class='m0' :disabled="disable" v-model="form.ifCod" :label="0" >普貨</el-radio>
    <el-radio class='m0' :disabled="disable" v-model="form.ifCod" :label="1" >仿牌</el-radio>                                 
  </div>
</el-form-item>

data(){
    return {
        form:{
            ifCode:0
        }
    }
}

后臺(tái)返回的是字符串則正常寫(xiě)；

<el-form-item label="仿牌選項(xiàng)：" prop="ifCod" size="mini" class='form-label'>
 <div id='radio' >
    <el-radio class='m0' :disabled="disable" v-model="form.ifCod" label="0" >普貨</el-radio>
    <el-radio class='m0' :disabled="disable" v-model="form.ifCod" label="1" >仿牌</el-radio>                                 
  </div>
</el-form-item>

data(){
    return {
        form:{
            ifCode:'0'
        }
    }
}

elementUI單選框radio傳值問(wèn)題

從后端查詢到單選框的文本及id，在表單中遍歷出單選按鈕，在提交表單時(shí)需要向后臺(tái)提交id而不是文本值

后臺(tái)提供的單選數(shù)據(jù)：

原先寫(xiě)的代碼：

:label的值會(huì)綁定到v-model上，這樣寫(xiě)的話傳給后臺(tái)的是文本值。

修改過(guò)后：

<el-radio-group v-model="form.type_property">
          <el-radio  v-for="item in propertyOptions" :key="item.Value" :label="item.Value">{{item.Text}}</el-radio>
</el-radio-group>

這樣傳給后臺(tái)的就是value值啦

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解Vue如何實(shí)現(xiàn)顏色選擇與調(diào)色板功能
顏色選擇和調(diào)色板是Web開(kāi)發(fā)中常用的功能，Vue作為一個(gè)流行的JavaScript框架，可以方便地實(shí)現(xiàn)顏色選擇和調(diào)色板功能，本文講講如何在Vue中進(jìn)行顏色選擇和調(diào)色板吧
2023-06-06
vue中百度地圖定位及附近搜索功能使用步驟
這篇文章主要為大家介紹了vue中百度地圖定位及附近搜索功能使用步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
vue實(shí)現(xiàn)監(jiān)控視頻直播的示例代碼
本文主要介紹了vue實(shí)現(xiàn)監(jiān)控視頻直播的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
基于vue-cli npm run build之后vendor.js文件過(guò)大的解決方法
今天小編就為大家分享一篇基于vue-cli npm run build之后vendor.js文件過(guò)大的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue下拉列表的兩種實(shí)現(xiàn)方式比較
這篇文章主要介紹了vue下拉列表的兩種實(shí)現(xiàn)方式比較，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2021-06-06
VUE-ElementUI?時(shí)間區(qū)間選擇器的使用
這篇文章主要介紹了VUE-ElementUI?時(shí)間區(qū)間選擇器的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue3獲取和操作DOM元素的項(xiàng)目實(shí)踐
在Vue3中,有時(shí)我們需要直接操作DOM節(jié)點(diǎn)，本文主要介紹了Vue3獲取和操作DOM元素的項(xiàng)目實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-08-08
vue v-for直接循環(huán)數(shù)字實(shí)例
今天小編就為大家分享一篇vue v-for直接循環(huán)數(shù)字實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
vue中解決el-date-picker更改樣式不生效問(wèn)題
在使用Vue.js進(jìn)行前端開(kāi)發(fā)的過(guò)程中,Element?UI?是一個(gè)非常流行的UI庫(kù),它提供了一套完整的組件來(lái)快速搭建美觀的用戶界面,但是我們經(jīng)常遇到一個(gè)問(wèn)題使用Element?UI提供的el-date-picker組件時(shí),嘗試自定義其樣式卻無(wú)法生效,所以本文給大家介紹如何解決這個(gè)問(wèn)題
2024-10-10
使用Vue編寫(xiě)一個(gè)日期選擇器
這篇文章主要為大家詳細(xì)介紹了如何使用Vue編寫(xiě)一個(gè)簡(jiǎn)單的日期選擇器,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-12-12