element-ui select选中对象 下拉菜单选中对象
element-ui api文档上说,select的v-model值只能是boolean/number/string,虽然对象不在此列,其实是可以绑定对象的。
要实现绑定对象,只需要两步,第一,option标签上value绑定对象。第二,在select标签上,声明value-key,它是option value对象的唯一标识属性,通常是id、code之类的,注意value-key是字符串类型,如果v-model唯一属性是value,则可value-key可省略。
<el-select
value-key="id"
v-model="order"
>
<el-option v-for="(order,idx) in orders"
:key="idx"
:label="order.name"
:value="order"
></el-option>
</el-select>
export default{
data(){
return {
orders:[
{
id:1,
name:"烤鱼"
},{
id:2,
name:"烤羊腿"
}
]
}
}
}
value和v-model的区别
select的value和v-model的区别,value是单向的,value变更会影响下拉菜单的选中项,但变更选中的下拉菜单,不会再同步到value。
model是双向的,v-model变更会影响下拉菜单的选中项,同时下拉选项变更也会同步到v-model。
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/20320.html