elementUI select组件value值注意事项详解

更新时间：2019年05月29日 10:15:51 作者：飘飘然

这篇文章主要介绍了elementUI select组件value值注意事项详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

select组件的使用方式就不细说，可查看select组件使用方式

主要要说一下注意事项：

select组件可以动态生成option选项，option选项绑定对应的文本值和value值。

有时候我们发现默认显示的内容会显示具体的value值而不是对应的文本，这种情况原因都是：

v-model绑定的值与option选项value值类型不符，

常规就是number与string

通用我们会循环一个数组、对象生成option选项

1.简单数组

const array1=[1,2,3]

<el-select v-model="seletValue">
  <el-option v-for="item in array1" :key="item" :value="item" :label="item">
  </el-option>
</el-select>

此时 option 的value 是number 类型，v-model绑定的seletValue也必须是number类型

2.对象数组

const arrayOptions=[{key:0,text:'a'},{key:0,text:'b'},{key:0,text:'c'}}]

<el-select v-model="seletValue">
 <el-option v-for="item in arrayOptions" :key="item.key" :value="item.key" :label="item.text">
 </el-option>
</el-select>

因为我们用item.key作为option的value，item.key 是json中的值，

此时 option的value是number类型，v-model绑定的seletValue也必须是number类型例如 seletValue=1

3.对象

const options={0:'a',1:'b',2:'c',}

<el-select v-model="seletValue">
 <el-option v-for="(value,key) in options" :key="key" :value="key" :label="item.value">
 </el-option>
</el-select>

因为在json对象的键:值结构中，键的都是string类型，这里我们把json的键作为 option的value，

此时 option的value其实是string 类型，v-model绑定的seletValue也必须是string类型例如 seletValue='1'

如果提交接口的数据要求是number怎么办，只需要在提交数据之前转换下Number(seletValue)就可以了

遇到这种情况可以参照上述情况检查代码调试

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue 2.1.3 实时显示当前时间,每秒更新的方法
今天小编就为大家分享一篇vue 2.1.3 实时显示当前时间,每秒更新的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue项目热更新的坑及解决
这篇文章主要介绍了vue项目热更新的坑及解决方案，具有很好的参考价值，希望对的大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
详解element-ui 组件el-autocomplete使用踩坑记录
最近使用了el-autocomplete组件，本文主要介绍了element-ui 组件el-autocomplete使用踩坑记录，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
浅谈Vue插槽实现原理
vue.js的灵魂是组件，而组件的灵魂是插槽。借助于插槽，我们能最大程度上实现组件复用。本文主要是对插槽的实现机制进行详细概括总结，在某些场景中，有一定的用处
2021-06-06
Vue实现内部组件轮播切换效果的示例代码
这篇文章主要介绍了Vue实现内部组件轮播切换效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
浅谈vue项目如何打包扔向服务器
本篇文章主要介绍了浅谈vue项目如何打包扔向服务器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
Vue 中使用 typescript的方法详解
Typescript 5年内的热度随时间变化的趋势，整体呈现一个上升的趋势。也说明ts越来越️受大家的关注了。这篇文章主要介绍了Vue 中使用 typescript的方法详解,需要的朋友可以参考下
2020-02-02
基于vue封装一个安全键盘组件
大部分中文应用弹出的默认键盘是简体中文输入法键盘,在输入用户名和密码的时候,如果使用简体中文输入法键盘,用户的输入记录会被缓存下来所以我们需要一个安全键盘,本文给大家介绍了如何基于vue封装一个安全键盘组件,需要的朋友可以参考下
2023-12-12
vue多次循环操作示例
这篇文章主要介绍了vue多次循环操作,结合实例形式分析了vue.js针对json嵌套数据的多次循环读取操作相关实现技巧,需要的朋友可以参考下
2019-02-02
vue axios form-data格式传输数据和文件方式
这篇文章主要介绍了vue axios form-data格式传输数据和文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05