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绑定值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

element-ui中使用upload组件获取上传文件信息
这篇文章主要介绍了element-ui中使用upload组件获取上传文件信息方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
Vue中ref的用法及演示
这篇文章主要介绍了Vue中ref的用法及演示，ref被用来给元素或子组件注册引用信息。引用信息会被注册在父组件上的$refs对象上，下面来看看文章的详细内容,需要的朋友可以参考一下
2021-11-11
解决iview table组件里的固定列表格不自适应的问题
这篇文章主要介绍了解决iview table组件里的固定列表格不自适应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue2+Element-ui实现el-table表格自适应高度的案例
这篇文章主要介绍了Vue2+Element-ui实现el-table表格自适应高度的案例,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-06-06
在Vue中解决跨域问题的常用方式
跨域问题是由浏览器引起的安全限制,而不是Vue框架本身导致的,Vue本身并不限制跨域访问,它只是一个前端框架,负责构建用户界面和处理数据逻辑,本文给大家介绍了在Vue中解决跨域问题的常用方式,需要的朋友可以参考下
2023-10-10
Vue用v-for给循环标签自身属性添加属性值的方法
这篇文章主要介绍了Vue用v-for给循环标签自身属性添加属性值的方法，文中大家给大家列举了三种方法 ,需要的朋友可以参考下
2018-10-10
Vue3中emits与attrs的区别分析
这篇文章主要给大家介绍了关于Vue3中emits与attrs区别的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
2021-10-10
解决vue初始化项目一直停在downloading template的问题
这篇文章主要介绍了解决vue初始化项目一直停在downloading template的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue关于数据绑定出错解决办法
这篇文章主要介绍了Vue关于数据绑定出错解决办法的相关资料,需要的朋友可以参考下
2017-05-05
websocket+Vuex实现一个实时聊天软件
这篇文章主要利用websocked 建立长连接，利用Vuex全局通信的特性，以及watch,computed函数监听消息变化，并驱动页面变化实现实时聊天，感兴趣的可以了解一下
2021-08-08