vue中的select绑定多个值
更新时间：2022年09月05日 09:10:32 作者：银月流霜
这篇文章主要介绍了vue中的select绑定多个值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue select绑定多个值
不再通过v-model和value进行绑定
而是通过绑定索引值Index
然后通过定义@input=change方法，通过索引值获取并更新想要绑定的多个值
<el-select v-model="basic_info.itemindex" placeholder="" @input="change"> <el-option v-for="(item,index) in categoryList" :key=index :label="item.categoryName" :value="index" /> </el-select>
change(index) {
this.basic_info.categoryCode = this.categoryList[index].categoryCode
this.default_return_value = this.categoryList[index].defaultReturnValue
},vue el-select 绑定id值
在实际需求中，el-select的数组选项有多个，展示给用户选择的是每个选项的文本，但是传给后台的数据需要文本对应的id
比如选项数组是：applyTypeList:[{id:1,label:‘甜品’},{id:2,label:‘烧烤’}]
下拉框可选的是甜品和烧烤，但是我们需要记录的不是甜品和烧烤，而是他们对应的id的值，此时就需要绑定id值。
HTML
<el-select v-model="applyType" placeholder="申请类型" clearable> <el-option v-for="item in applyTypeList" :key="item.id" :value="item.id" :label="item.label"></el-option> </el-select>
绑定后，applyType会根据用户的选择而变化成不同的id值。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在我们日常开发中经常因为思维定式，我们会犯一些奇怪的错误，有时候看似简单的问题却给出了复杂的解决方案。下面这篇文章主要介绍了vue.js父组件使用外部对象的方法，这个看似简单却绕了一些弯路的问题，有必要和大家分享下，需要的朋友可以参考学习，下面来看看吧。2017-04-04
这篇文章主要介绍了Vue2中的过滤器filter使用及注意说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue3正式版已经发布大半年了,咱也得紧跟时代潮流,vue3带来的很多改变,下面这篇文章主要给大家介绍了关于利用Vue3实现拖拽定制化首页功能的相关资料,需要的朋友可以参考下2022-05-05
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
这篇文章主要介绍了vue使用自定义事件的表单输入组件用法,结合实例形式详细分析了vue.js日期组件与货币组件相关操作技巧及注意事项,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了Vue Cli 3项目 使用融云IM实现聊天功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要介绍了使用vue-cli3新建一个项目并写好基本配置的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue 实现的树形菜单,需要的朋友可以参考下2018-03-03
Vue3+NodeJS+Soket.io实现实时聊天的示例代码
本文主要介绍了Vue3+NodeJS+Soket.io实现实时聊天的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
本篇文章主要介绍了vue-resouce设置请求头的三种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家详细介绍了如何利用vue实现拍照或录像的功能,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以跟随小编一起学习一下2023-11-11
最新评论