el-select赋值对象是对象时,出现赋值与展示不一致问题

代码逻辑类似:module 是个object

{

"appId": "",

"id": 65,

"name": ""

}

复制代码
 <el-form :model="form">
           
            <el-form-item label="申请模块" >
                <el-select v-model="form.module">
                     <el-option
                          v-for="module in module_list"
                          :key="module .id"
                          :label="module .name"
                          :value="module">
                        </el-option>
                </el-select>

</el-form>

赋值后总是出现展示的和实际赋值的不一致。原来是因为缺少了 value-key 作为它的唯一性标识。

如果 Select 的绑定值为对象类型,请务必指定 value-key 作为它的唯一性标识。

加上value-key就好了

复制代码
 <el-form :model="form">
           
            <el-form-item label="申请模块" value-key="id">
                <el-select v-model="form.module">
                     <el-option
                          v-for="module in module_list"
                          :key="module .id"
                          :label="module .name"
                          :value="module">
                        </el-option>
                </el-select>

</el-form>
相关推荐
前端 贾公子28 分钟前
pnpm 的 resolution-mode 配置 ( pnpm 的版本解析)
前端
伍哥的传说1 小时前
React 自定义Hook——页面或元素滚动到底部监听 Hook
前端·react.js·前端框架
麦兜*3 小时前
Spring Boot 集成Reactive Web 性能优化全栈技术方案,包含底层原理、压测方法论、参数调优
java·前端·spring boot·spring·spring cloud·性能优化·maven
知了一笑3 小时前
独立开发第二周:构建、执行、规划
java·前端·后端
UI前端开发工作室4 小时前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~4 小时前
重学前端004 --- html 表单
前端·html
TE-茶叶蛋4 小时前
Flutter、Vue 3 和 React 在 UI 布局比较
vue.js·flutter·react.js
遇到困难睡大觉哈哈4 小时前
CSS中的Element语法
前端·css
Real_man4 小时前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中4 小时前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts