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

总结

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

您可能感兴趣的文章:

深入理解vue3中的reactive()
本文主要介绍了深入理解vue3中的reactive()，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
vue axios接口请求封装方式
这篇文章主要介绍了vue axios接口请求封装方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue 实现websocket发送消息并实时接收消息
这篇文章主要介绍了vue 实现websocket发送消息并实时接收消息,项目结合vue脚手架和websocket来搭建，本文给大家分享实例代码，需要的朋友可以参考下
2019-12-12
axios+vue请求时携带cookie的方法实例
做项目时遇到一个需求,后端需要在接口请求时,对用户登陆状态进行判断,需要在请求时携带Cookie,下面这篇文章主要给大家介绍了关于axios+vue请求时携带cookie的相关资料,需要的朋友可以参考下
2022-09-09
深入理解vue.js双向绑定的实现原理
vue.js是MVVM结构的，同类的还有AngularJs；至于MVC、MVP、MVVM的比较网上已经有很多了，这样不再重复。这篇文章将给大家深入的介绍vue.js双向绑定的实现原理，有需要的朋友们可以参考借鉴，下面跟着小编一起来看看吧。
2016-12-12
vue在组件中使用v-model的场景
这篇文章主要介绍了vue在组件中使用v-model的场景，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-07-07
vue项目build打包后部分样式错乱的解决
这篇文章主要介绍了vue项目build打包后部分样式错乱的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
el autocomplete支持分页上拉加载使用详解
这篇文章主要为大家介绍了el autocomplete支持分页上拉加载使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
Vue 3.0 项目创建过程及解决方案
这篇文章主要介绍了Vue 3.0 项目创建过程，首先要确保电脑上已安装node.js,确保已安装 Vue CLI,本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2024-04-04
TypeScript基本类型 typeof 和keyof案例详解
这篇文章主要介绍了TypeScript基本类型 typeof 和keyof案例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-10-10