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。


发布评论
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

vue.js 浏览器中不显示vue devtools详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。