vue+elementUI中el-radio设置默认值方式

更新时间：2023年12月02日 10:42:57 作者：恩婧

这篇文章主要介绍了vue+elementUI中el-radio设置默认值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue elementUI中el-radio设置默认值

如果后台返回的单选框的值是number：单选框的lable需要设置成 :lable=‘0’;

如下：

<el-form-item label="仿牌选项：" 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
        }
    }
}

后台返回的是字符串则正常写；

<el-form-item label="仿牌选项：" 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传值问题

从后端查询到单选框的文本及id，在表单中遍历出单选按钮，在提交表单时需要向后台提交id而不是文本值

后台提供的单选数据：

原先写的代码：

:label的值会绑定到v-model上，这样写的话传给后台的是文本值。

修改过后：

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

这样传给后台的就是value值啦

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解Vue如何实现颜色选择与调色板功能
颜色选择和调色板是Web开发中常用的功能，Vue作为一个流行的JavaScript框架，可以方便地实现颜色选择和调色板功能，本文讲讲如何在Vue中进行颜色选择和调色板吧
2023-06-06
vue中百度地图定位及附近搜索功能使用步骤
这篇文章主要为大家介绍了vue中百度地图定位及附近搜索功能使用步骤详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
vue实现监控视频直播的示例代码
本文主要介绍了vue实现监控视频直播的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-05-05
基于vue-cli npm run build之后vendor.js文件过大的解决方法
今天小编就为大家分享一篇基于vue-cli npm run build之后vendor.js文件过大的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue下拉列表的两种实现方式比较
这篇文章主要介绍了vue下拉列表的两种实现方式比较，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-06-06
VUE-ElementUI 时间区间选择器的使用
这篇文章主要介绍了VUE-ElementUI 时间区间选择器的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
Vue3获取和操作DOM元素的项目实践
在Vue3中,有时我们需要直接操作DOM节点，本文主要介绍了Vue3获取和操作DOM元素的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-08-08
vue v-for直接循环数字实例
今天小编就为大家分享一篇vue v-for直接循环数字实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue中解决el-date-picker更改样式不生效问题
在使用Vue.js进行前端开发的过程中,Element UI 是一个非常流行的UI库,它提供了一套完整的组件来快速搭建美观的用户界面,但是我们经常遇到一个问题使用Element UI提供的el-date-picker组件时,尝试自定义其样式却无法生效,所以本文给大家介绍如何解决这个问题
2024-10-10
使用Vue编写一个日期选择器
这篇文章主要为大家详细介绍了如何使用Vue编写一个简单的日期选择器,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12