【踩坑记录】element-ui select的value绑定对象类型时回显bug的问题

原创已于 2022-05-17 18:48:03 修改 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bug #elementui #vue.js

于 2022-05-17 18:38:00 首次发布

踩坑记录专栏收录该内容

15 篇文章

订阅专栏

本文档介绍了在使用 Element UI 的 Select 组件时遇到的问题，即当 v-model 绑定对象时初始状态显示错误且无法响应变化。解决办法是在 Select 组件上添加 `value-key` 属性，将其绑定到对象的特定属性，确保该属性与选项中 `:value` 绑定的属性一致。这个解决方案适用于 Element UI 的 2.15.7 版本及以上。

<el-select
    placeholder="请选择"
    v-model="item.data"//收集的数据放在哪
>
    <el-option
        v-for="item2 in item.attrValueList"
        :key="item2.id"
        :value="item2"//要收集的数据
        :label="item2.valueName"//要在option中显示的内容
    >
    </el-option>
</el-select>

此时在select框中显示出错:

此时是未进行选择的初始状态选择后也不会响应变化

文档中也没有讲绑对象时的注意事项.（因为使用的是2.13.2版本）

后在2.15.7版的文档中找到解决办法：

<el-select
    placeholder="请选择"
    v-model="item.data"//收集的数据放在哪
    value-key="valueName"//解决办法
>
    <el-option
        v-for="item2 in item.attrValueList"
        :key="item2.id"
        :value="item2"//要收集的数据
        :label="item2.valueName"//要在option中显示的内容
    >
    </el-option>
</el-select>

注意：文档中没写，value-key绑定的数据必须是v-model绑定的对象的元素（或者说是 :value 收集的对象的元素）