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>
相关推荐
GuWenyue4 小时前
放弃云端API!一套React+WebGPU本地LLM方案,零数据上传、离线可用
前端·人工智能·前端框架
原则猫5 小时前
函数/变量提升
前端
独泪了无痕6 小时前
Vue3 Hooks使用实战解析
前端·vue.js
shawxlee7 小时前
vue3在public下封装config.js自定义配置动态数据,可在打包后直接修改,方便后端部署及后续维护
前端·javascript·经验分享·vue·团队开发·js·项目优化
用户059540174468 小时前
把记忆存储的回归测试从手工换成 Playwright + GitHub Actions,线上缺陷降低 80%
前端·css
触底反弹8 小时前
🚀 从 DOM0 级到 React 合成事件:前端事件监听的 20 年演进史
前端·react.js·面试
kyriewen8 小时前
我给前端项目的接口请求套了6层保护——才发现以前一直在裸奔
前端·javascript·面试
颜酱8 小时前
04 | 召回前置准备:搭好召回所需的四个数据库
前端·人工智能·后端
郝亚军9 小时前
如何安装webstorm、Node.js和vue CLI
前端·javascript·vue.js
IT_陈寒9 小时前
React的useEffect依赖项把我坑惨了
前端·人工智能·后端