ElementUI中el-dropdown-item點(diǎn)擊事件無效問題

更新時(shí)間：2023年04月23日 10:13:13 作者：樹洞菇?jīng)?

這篇文章主要介紹了ElementUI中el-dropdown-item點(diǎn)擊事件無效問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

ElementUI中el-dropdown-item點(diǎn)擊事件無效

若直接在el-dropdown-item上添加click事件，點(diǎn)擊后沒有任何反應(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就是一個(gè)組件）綁定事件的時(shí)候，必須加上navtive修飾符才能生效，navtive可以監(jiān)聽根元素的原生事件

el-dropdown-item添加點(diǎn)擊事件

問題

Vue引入Element-ui框架，使用其DropDown組件時(shí)，發(fā)現(xiàn)官網(wǎng)教程并沒有給出el-dropdown-item點(diǎn)擊事件的使用方法。

因此需要自定義點(diǎn)擊事件，也就是需要添加原生的點(diǎn)擊事件。

添加點(diǎn)擊事件

使用 @click.native=“”，此時(shí)就可以實(shí)現(xiàn)點(diǎ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>