el-select绑定值的坑

碰到一个问题,选择框的数据是后端传过来的,下拉框的数据也是后端传过来的,但是打开下拉框时,发现数据没有高亮。

最后发现,只要选择框v-model给的值和option的value绑定的值一致,就可以高亮。

大多数情况下,都绑定的是value值(下图的name),所以发现不了这个问题。

其实两个都绑定id也是可以的,只要两个绑定的一致就行。

html 复制代码
<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决定了显示。

相关推荐
daols883 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇3 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊3 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习4 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖4 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐5 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06275 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue