ElementUI中el-dropdown-item點擊事件無效問題
更新時間：2023年04月23日 10:13:13 作者：樹洞菇?jīng)?
這篇文章主要介紹了ElementUI中el-dropdown-item點擊事件無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
ElementUI中el-dropdown-item點擊事件無效
若直接在el-dropdown-item上添加click事件，點擊后沒有任何反應(yīng)。
在click后添加native修飾符，則可解決問題。
代碼如下：
<el-dropdown> ? ? <span class="user"></span> ? ? <el-dropdown-menu slot="dropdown"> ? ? ? ? <el-dropdown-item @click.native="changePassword">修改密碼</el-dropdown-item> ? ? </el-dropdown-menu> </el-dropdown>
在給Vue組件（el-dropdown-item就是一個組件）綁定事件的時候，必須加上navtive修飾符才能生效，navtive可以監(jiān)聽根元素的原生事件
el-dropdown-item添加點擊事件
問題
Vue引入Element-ui框架，使用其DropDown組件時，發(fā)現(xiàn)官網(wǎng)教程并沒有給出el-dropdown-item點擊事件的使用方法。
因此需要自定義點擊事件，也就是需要添加原生的點擊事件。
添加點擊事件
使用 @click.native=“”，此時就可以實現(xiàn)點擊事件了。
<el-dropdown>
? <span class="el-dropdown-link">
? ? 下拉菜單<i class="el-icon-arrow-down el-icon--right"></i>
? </span>
? <el-dropdown-menu slot="dropdown">
? ? <el-dropdown-item @click.native="handleClick('0')">黃金糕</el-dropdown-item>
? ? <el-dropdown-item @click.native="handleClick('1')">獅子頭</el-dropdown-item>
? </el-dropdown-menu>
</el-dropdown>了解一下@click.native
@click
@click 常見于其用在Vue中的事件綁定，而@實際上是 v-on 的簡寫，而 v-on 則是對 vue 的事件體系封裝之后的 API接口。
native
native修飾符用于處理DOM原生事件，在本文中由于組件 DropDown并沒有封裝點擊事件，因此需要添加原生的點擊事件，因此使用@click.native。
擴展@click的其他用法
@click.stop： 阻止事件冒泡@click.prevent： 阻止事件的默認(rèn)行為 （提交事件不再重載頁面）@click.capture： 優(yōu)先觸發(fā)@click.self： 只有自己能觸發(fā)，子元素?zé)o法觸發(fā)@click.once： 只能提交一次（. o n c e .once.once 修飾符還能被用到自定義的組件事件上。）
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
大家在vue中，經(jīng)常會用到數(shù)據(jù)請求問題，常用的有vue-resourse、axios ，今天小編給大家介紹下axios的post請求 ，感興趣的朋友跟隨腳本之家小編一起看看吧2018-04-04
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)右上角時間顯示實時刷新，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
Vue+Element ui 根據(jù)后臺返回數(shù)據(jù)設(shè)置動態(tài)表頭操作
這篇文章主要介紹了Vue+Element ui 根據(jù)后臺返回數(shù)據(jù)設(shè)置動態(tài)表頭操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要給大家分享的是Vue3的幾個優(yōu)勢，Vue3仍然在源碼、性能和語法 API 三個大的方面進行了優(yōu)化，下面我們一起進入文章看看具體詳情吧2021-10-10
elementUI中的$confirm調(diào)換兩個按鈕位置的實例代碼
這篇文章主要介紹了elementUI中的$confirm調(diào)換兩個按鈕位置的實例代碼,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要介紹了elementUI select組件使用及注意事項詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了vue axios封裝以及API統(tǒng)一管理 ,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue項目打包后請求地址錯誤/打包后跨域操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue3中使用ref標(biāo)簽對組件進行操作方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
vuex 如何動態(tài)引入 store modules
這篇文章主要介紹了vuex 如何動態(tài)引入 store modules，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03