el-select绑定值遇到的问题小结
更新时间：2023年12月25日 10:35:07 作者：前端小怪兽zmy
碰到一个问题,选择框的数据是后端传过来的,下拉框的数据也是后端传过来的,但是打开下拉框时,发现数据没有高亮,最后通过只要选择框v-model给的值和option的value绑定的值一致,就可以高亮,感兴趣的朋友一起看看吧
el-select绑定值的坑
碰到一个问题，选择框的数据是后端传过来的，下拉框的数据也是后端传过来的，但是打开下拉框时，发现数据没有高亮。
最后发现，只要选择框v-model给的值和option的value绑定的值一致，就可以高亮。
大多数情况下，都绑定的是value值（下图的name），所以发现不了这个问题。
其实两个都绑定id也是可以的，只要两个绑定的一致就行。
<el-select v-model="form" class="m-2" placeholder="Select" size="large">
<el-option
v-for="item in options"
:key="item.value"
:label="item.name"
:value="item.id" /> //value绑定的值是id
</el-select>
const options = [
{
id: '123',
name: '名字一'
},
{
id: '456',
name: '名字二'
},
{
id: '789',
name: '名字三'
}
]
let form= ref('123') //v-model给的值也是id不是说，form给的值是什么就显示什么，这里form给123，但是选择框显示的还是名字一。
因此，option的label决定了显示。
补充：
elment-plus中el-select组件绑定对象踩坑
<el-select v-model="row.way" value-key="id" clearable filterable placeholder="请选择主线路">
<el-option
v-for="(item,index) in listWay"
:key="index"
:label="item.name"
:value="item"/>
</el-select>以上时可以正常执行的代码，其中row.way是一个对象。踩坑记录一下（尤其第一个）：
1、el-select绑定对象不仅要协商v-model，并且一定要加上value-key。不然选啥都不变，像个傻子一样；
2、v-for中两种写法，一个是"item in list" 或者 "(item,index) in list"
3、el-select中v-model绑定对象，则el-option中 :value也必须是对象
到此这篇关于el-select绑定值的坑的文章就介绍到这了,更多相关el-select绑定值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue-treeselect及el-tree点击节点获取上级节点的数据方式
这篇文章主要介绍了vue-treeselect及el-tree点击节点获取上级节点的数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
对于vue下的双向绑定功能，个人理解为在处理逻辑的过程中缓存了大量的node对象，node对象可以是html标签、文本内容。既然选择了缓存这些对象，那么在用的过程中哪里需要改变就把node拿出来，进行标签属性的变更或者文本内容的修改。本文主要讲了如何实现双向绑定2021-06-06
插槽（Slot）是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性,下面这篇文章主要给大家介绍了关于vue2中插槽(slot)的基本使用规范的相关资料,需要的朋友可以参考下2022-03-03
vue-quill-editor+plupload富文本编辑器实例详解
这篇文章主要介绍了vue-quill-editor+plupload富文本编辑器实例详解,需要的朋友可以参考下2018-10-10
使用live-server快速搭建本地服务器+自动刷新的方法
下面小编就为大家分享一篇使用live-server快速搭建本地服务器+自动刷新的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue中this.$createElement方法的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
本篇内容给大家详细分析了关于vue数据控制视图的源码以及重点做了注释，有兴趣的朋友参考学习下。2018-03-03
下面小编就为大家分享一篇vue页面切换到滚动页面显示顶部的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
下面小编就为大家带来一篇使用vue-resource进行数据交互的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本篇文章主要介绍了自定义vue组件发布到npm的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论