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>
相关推荐
女生也可以敲代码17 分钟前
AI时代下的50道前端开发面试题:从基础到大模型应用
前端·面试
ZhengEnCi24 分钟前
M5-markconv自定义CSS样式指南 📝
前端·css·python
IT_陈寒42 分钟前
SpringBoot自动配置的坑差点让我加班到天亮
前端·人工智能·后端
xingpanvip42 分钟前
星盘接口开发文档:星相日历接口指南
android·开发语言·前端·css·php·lua
@PHARAOH1 小时前
WHAT - GitLens supercharged 插件
前端
TT模板1 小时前
苹果cms整合西瓜播放器XGplayer插件支持跳过片头尾
前端·html5
Wect2 小时前
React 性能优化精讲
前端·react.js·性能优化
追风筝的人er2 小时前
SpringBoot+Vue3 企业考勤如何处理法定假期?节假日方案、调休补班与工作日判断链路拆解
前端·vue.js·后端
无敌的黑星星3 小时前
Java8 CompletableFuture 实战指南
linux·前端·python
雁鸣零落3 小时前
如何在 Chrome 中查看其他浏览器的书签?书签空间订阅与侧边栏只读切换指南
前端·chrome·edge浏览器