在el-select
中希望将value
设置为对象时,遇到错误,不能正确的显示勾选项,但实际上v-model
到的值又是正确的。
在官方文档中看到:

原来是忘了填写
value-key
的值。示例如下:
let userList = [{id: 1, name: '张三'}, {id: 2, name: '李四'},{id: 3, name: '王五'}]
<el-select
placeholder="请选择"
value-key="id"
v-model="userInfo">
<el-option
v-for="item in userList"
:key="item.id"
:label="item.name"
:value="item">
</el-option>
</el-select>
注意,value-key
中的名称需和数组中的key
值保持一致。
如果没有设置value-key
,由于其有默认值value
,因此,改写userList
如下也是可以的
let userList = [{value: 1, name: '张三'}, {value: 2, name: '李四'},{value: 3, name: '王五'}]
<el-select
placeholder="请选择"
v-model="userInfo">
<el-option
v-for="item in userList"
:key="item.value"
:label="item.name"
:value="item">
</el-option>
</el-select>
网友评论