elementUI select组件value值注意事项

OnlyMyRailgun 发布于2019-08-22 18:48 / 441人阅读

摘要：组件的使用方式就不细说，可查看组件使用方式主要要说一下注意事项组件可以动态生成选项，选项绑定对应的文本值和值。

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

主要要说一下注意事项：
select组件可以动态生成option选项，option选项绑定对应的文本值和value值。
有时候我们发现默认显示的内容会显示具体的value值而不是对应的文本，这种情况原因都是：
v-model绑定的值与option选项value值类型不符，
常规就是number与string

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

1.简单数组

const array1=[1,2,3]

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

2.对象数组

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

因为我们用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",}

因为在json对象的 键:值 结构中，键的都是string类型，这里我们把json的键作为 option的value，
此时 option的value其实是string 类型，v-model绑定的seletValue也必须是string类型例如 seletValue="1"

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

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

GPU云服务器云服务器 value值读写value值 select默认值 elementui

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96229.html

数据驱动，快速开发组件（ElementUI篇）

摘要：基于这种思路，那留给我们的只有两步，组件设计和数据设计。关于组件的相关逻辑，可能要在文章里面一次性说清楚，还是需要费很大的精力，不过希望数据驱动的思想能够让之前没有体会到这种开发乐趣的小伙伴们有到新的想法。在日常开发中，我们肯定不止一次碰到重复的业务代码，明明功能相似，但总没思路去把它封装成组件。关于封装组件，希望这篇文章能带给大家新的思路，去更高效的完成日常开发。（注：例子都是基于...

enrecul101 2019-08-26 13:39 评论0 收藏0
在Vue项目中使用ElementUI(一)

摘要：这是一段内容标题名称确定点击确定后的回调函数确认消息弹框提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。。初始化一个Vue项目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

linkin 2019-08-02 15:27 评论0 收藏0
在Vue项目中使用ElementUI(一)

摘要：这是一段内容标题名称确定点击确定后的回调函数确认消息弹框提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。。初始化一个Vue项目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

shadowbook 2019-08-23 18:27 评论0 收藏0
在Vue项目中使用ElementUI(一)

摘要：这是一段内容标题名称确定点击确定后的回调函数确认消息弹框提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。。初始化一个Vue项目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

NicolasHe 2019-08-30 11:18 评论0 收藏0