美文网首页
el-select选中的value设置为对象

el-select选中的value设置为对象

作者: 牙牙and小尾巴 | 来源:发表于2019-04-26 15:51 被阅读0次

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

image.png
原来是忘了填写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>

相关文章

网友评论

      本文标题:el-select选中的value设置为对象

      本文链接:https://www.haomeiwen.com/subject/ftcqnqtx.html