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过渡动画时,注意选择器优先级,谨慎合并样式,Vue2中关于显示隐藏的类名有v-enter、v-leave以及v-enter-active、v-leave-active等,这些可以用来定义动画的持续时间和样式,感兴趣的朋友跟随小编一起看看吧2024-09-09
在项目中,有时需要打印页面的表格,所以下面这篇文章主要给大家介绍了关于vue打印功能实现的两种方法,以及批量打印的完整代码,需要的朋友可以参考下2021-06-06
本文通过实例代码给大家介绍了vue和webpack项目构建过程常用的npm命令,需要的朋友可以参考下2018-06-06
本文描述了一个Vue3和Vite项目中实现版本更新检查的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-11-11
这篇文章主要介绍了vue 搭建后台系统模块化开发详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要为大家详细介绍了Vue2.0实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了vue父子组件的数据传递示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要为大家详细介绍了Vue非父子组件通信的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
今天小编就为大家分享一篇解决axios post 后端无法接收数据的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
今天小编就为大家分享一篇对Vue.js之事件的绑定(v-on: 或者 @ )详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论