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>
相关推荐
栉甜12 分钟前
Vue2学习内容(上)
前端·javascript·vue.js·学习
梦曦i21 分钟前
v0.2.0 架构升级:class + reactive 重塑状态管理
前端·uni-app x
布丁爱干饭22 分钟前
寄给午后
前端
java1234_小锋1 小时前
【技术专题】CSS3 网页技术 - CSS3 布局进阶
前端·css·css3
zhippt_10141 小时前
只剩截图没有源文件?图转PPT把图片还原成可编辑幻灯片
前端·人工智能·powerpoint
shmily麻瓜小菜鸡2 小时前
TypeScript 知识点补充(第三部分:工程化与高级类型)
前端·javascript·typescript
10岁的博客2 小时前
Chrome 扩展安全攻防实录:从权限模型到真实漏洞复盘
前端·chrome·安全
QianhangQianping2 小时前
WebSocket实时推送+ HTTP 定时轮询:一块大屏两套取数怎么不打架
前端·websocket·网络协议·http·低代码·架构·数据可视化
小郎君6582 小时前
(六)el-cascader 的展示值为什么不能直接 join:emitPath、路径还原与多选去重
vue.js·算法
Eider19982 小时前
Python基础知识之并发相关-2
开发语言·前端·python