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为自定义路径设置别名的方法
这篇文章介绍了vue为自定义路径设置别名的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-11-11
详解Vue+elementUI build打包部署后字体图标丢失问题
这篇文章主要介绍了详解Vue+elementUI build打包部署后字体图标丢失问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
Vue计算属性与侦听器和过滤器超详细介绍
这篇文章主要介绍了Vue计算属性与侦听器和过滤器，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10
Vue实现步骤条效果
这篇文章主要为大家详细介绍了Vue实现步骤条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue实现点击复制到粘贴板
这篇文章主要为大家详细介绍了vue实现点击复制到粘贴板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
vue中路由验证和相应拦截的使用详解
这篇文章主要为大家详细介绍了vue中路由验证和相应拦截的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-12-12
vue cesium加载点与定位到指定位置的实现方法
Cesium是一个用于创建高性能、跨平台的3D地球和地图的开源JavaScript库,它提供了许多功能,包括地理空间数据可视化、地理定位和地图导航等,这篇文章主要介绍了vue cesium加载点与定位到指定位置,需要的朋友可以参考下
2024-03-03
vue2导航根据路由传值,而改变导航内容的实例
下面小编就为大家带来一篇vue2导航根据路由传值,而改变导航内容的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
vue-router 导航完成后获取数据的实现方法
这篇文章主要介绍了vue-router 导航完成后获取数据,通过使用生命周期的 created() 函数，在组件创建完成后调用该方法，本文结合实例代码给大家讲解的非常详细需要的朋友可以参考下
2022-11-11
vue3 组合式api中 ref 和$parent 的使用方法
vue3中，在组件中添加一个 component ref=“xxx” ，就可以在父组件中得到子组件的 dom 对象，以及虚拟的 dom 对象，有了虚拟 dom, 我们就可以在父组件中控制子组件的显示了，这篇文章主要介绍了vue3组合式api中ref和$parent的使用,需要的朋友可以参考下
2023-09-09