vue使用element-ui的el-input監(jiān)聽不了回車事件的解決方法
更新時間：2018年01月12日 15:38:51 作者：無所事事者愛嘲笑
小編在使用element-ui時，el-input組件監(jiān)聽不了回車事件，怎么回事呢？下面小編給大家?guī)砹藇ue使用element-ui的el-input監(jiān)聽不了回車事件的解決方法，一起看看吧
原因
今天在使用element-ui時，el-input組件監(jiān)聽不了回車事件，如下代碼沒有想要的效果：
<el-input class="search-input" placeholder="請輸入內(nèi)容" v-model="searchText" @keyup.enter="search()"></el-input>
原因應(yīng)該是element-ui自身封裝了一層input標(biāo)簽之后影響了事件的監(jiān)聽，在element-ui里有很多因為自身封裝了幾層標(biāo)簽導(dǎo)致事件和樣式無法按想要的效果呈現(xiàn)，遇到后可以在網(wǎng)頁中查看dom結(jié)構(gòu)分析原因。
解決
在事件后面加上.native：
<el-input class="search-input" placeholder="請輸入內(nèi)容" v-model="searchText" @keyup.enter.native="search()"></el-input>
總結(jié)
以上所述是小編給大家介紹的vue使用element-ui的el-input監(jiān)聽不了回車事件的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue結(jié)合echarts繪制一個支持切換的折線圖實例
這篇文章主要介紹了vue結(jié)合echarts繪制一個支持切換的折線圖實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本文主要介紹了vue實現(xiàn)登陸頁面開發(fā)實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
上傳圖片不管是后臺還是前端小程序，上傳圖片都是一個比不可少的功能有時候需要好幾個頁面都要上傳圖片，每個頁面都寫一個非常不方便，本文就給大家介紹vue如何封裝一個上傳多張圖片的組件,需要的朋友可以參考下2023-07-07
Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)2
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)的相關(guān)資料，實現(xiàn)Observer構(gòu)造函數(shù)，監(jiān)聽已有數(shù)據(jù)data中的所有屬性，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
今天小編就為大家分享一篇vue之debounce屬性被移除及處理詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue使用docx-preview實現(xiàn)docx文件在線預(yù)覽功能全過程
文件在線預(yù)覽是目前移動化辦公的一種新趨勢,下面這篇文章主要給大家介紹了關(guān)于vue?docx-preview實現(xiàn)docx文件在線預(yù)覽功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作
這篇文章主要介紹了vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue-router路由懶加載和權(quán)限控制的相關(guān)資料2017-12-12
打包壓縮成zip的東西,再解壓,很麻煩,本文主要介紹了vue中預(yù)覽zip的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2023-09-09
今天小編就為大家分享一篇vue 實現(xiàn)特定條件下綁定事件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11