天天看點

element-ui select 點選事件無效

用第三方元件或者UI架構會自帶自身封裝的事件,如keyup,click等,會覆寫原生的事件,進而無法起效果。.native 修飾符就是用來注冊元素的原生事件而不是元件自定義事件的。

代碼示例:

<el-select v-model="value" ref="select" placeholder="請選擇">
	<el-option
		v-for="item in options"
		:key="item.value"
		:label="item.label"
		:value="item.value"
		@click.native="getItem(item)"
	></el-option>
</el-select>
getItem(item){
	console.log(item);
	},
           

在 Vue 2.0 中,為自定義元件綁定原生事件必須使用 .native 修飾符:

<my-component @click.native=“handleClick”>Click Me

從易用性的角度出發,elment-ui對 Button 元件進行了處理,使它可以監聽 click 事件.

<el-button @click=“handleButtonClick”>Click Me

但是對于其他元件,還是需要添加 .native 修飾符。