vue使用element-ui的el-input監(jiān)聽不了回車事件的解決方法
更新時(shí)間：2018年01月12日 15:38:51 作者：無所事事者愛嘲笑
小編在使用element-ui時(shí)，el-input組件監(jiān)聽不了回車事件，怎么回事呢？下面小編給大家?guī)砹藇ue使用element-ui的el-input監(jiān)聽不了回車事件的解決方法，一起看看吧
原因
今天在使用element-ui時(shí)，el-input組件監(jiān)聽不了回車事件，如下代碼沒有想要的效果：
<el-input class="search-input" placeholder="請(qǐng)輸入內(nèi)容" v-model="searchText" @keyup.enter="search()"></el-input>
原因應(yīng)該是element-ui自身封裝了一層input標(biāo)簽之后影響了事件的監(jiān)聽，在element-ui里有很多因?yàn)樽陨矸庋b了幾層標(biāo)簽導(dǎo)致事件和樣式無法按想要的效果呈現(xiàn)，遇到后可以在網(wǎng)頁中查看dom結(jié)構(gòu)分析原因。
解決
在事件后面加上.native：
<el-input class="search-input" placeholder="請(qǐng)輸入內(nèi)容" v-model="searchText" @keyup.enter.native="search()"></el-input>
總結(jié)
以上所述是小編給大家介紹的vue使用element-ui的el-input監(jiān)聽不了回車事件的解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
VUE+ElementUI下載文件的幾種方式(小結(jié))
本文主要介紹了VUE+ElementUI下載文件的幾種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
ElementUI是Vue的UI框架,提供了豐富的組件,方便快速開發(fā)頁面,本文詳細(xì)介紹了ElementUI的安裝、使用方法以及常見組件的說明,包括基礎(chǔ)組件、布局組件、選擇框組件、輸入框組件、下拉框組件等,需要的朋友可以參考下2024-11-11
Vue2.0如何發(fā)布項(xiàng)目實(shí)戰(zhàn)
本篇文章主要介紹了Vue2.0如何發(fā)布項(xiàng)目實(shí)戰(zhàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
vscode中使用vue的一些插件總結(jié)(方便開發(fā))
對(duì)于很多使用vscode編寫vue項(xiàng)目的新手同學(xué)來說,可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于vscode中使用vue的一些插件,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
vue實(shí)現(xiàn)靜態(tài)頁面點(diǎn)贊和取消點(diǎn)贊功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)靜態(tài)頁面點(diǎn)贊和取消點(diǎn)贊的功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
vue.js 實(shí)現(xiàn)a標(biāo)簽href里添加參數(shù)
今天小編就為大家分享一篇vue.js 實(shí)現(xiàn)a標(biāo)簽href里添加參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue $emit $refs子父組件間方法的調(diào)用實(shí)例
今天小編就為大家分享一篇Vue $emit $refs子父組件間方法的調(diào)用實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
最近寫vue的一個(gè)練手項(xiàng)目需要在里面實(shí)現(xiàn)一個(gè)輪播圖,想到去用第三方插件,百度了一輪,發(fā)現(xiàn)大部分都是swiper這個(gè)插件,這篇文章主要給大家介紹了關(guān)于vue2使用swiper4踩坑的相關(guān)資料,需要的朋友可以參考下2022-01-01
vue.js實(shí)現(xiàn)會(huì)動(dòng)的簡歷(包含底部導(dǎo)航功能，編輯功能)
這篇文章主要介紹了vue.js實(shí)現(xiàn)一個(gè)會(huì)動(dòng)的簡歷(包含底部導(dǎo)航功能，編輯功能),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
vue 2.5.1 源碼學(xué)習(xí) 之Vue.extend 和 data的合并策略
這篇文章主要介紹了Vue.extend 和 data的合并策略 ，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06