Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法
更新時間：2024年03月12日 10:24:19 作者：魚干～
在el-form表單組件中el-input組件輸入內(nèi)容后按下Enter鍵刷新了整個頁面,下面這篇文章主要給大家介紹了關(guān)于Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法,需要的朋友可以參考下
技術(shù)：vue3+element plus的UI框架
今天做了一個小小的功能，就是基于elementUi框架的一個輸入框，需要監(jiān)聽輸入框的回車事件，然后調(diào)取接口。
代碼如下：
<el-form :model="from" :inline="true">
<el-form-item label="身份證號">
<el-input
v-model="from.idCard"
placeholder="請輸入身份證"
clearable
prefix-icon="Search"
maxlength="18"
show-word-limit
autofocus
style="width: 260px"
@change="selectIdCard"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="selectIdCard">確定</el-button>
</el-form-item>
</el-form>
在輸入框回車后會刷新頁面，查詢的原因如下
解決方案：
在el-form里加上@submit.prevent ，
input輸入框里可以使用@keyup.enter監(jiān)聽回車事件
<el-form :model="from" :inline="true" @submit.prevent>
<el-form-item label="身份證號">
<el-input
v-model="from.idCard"
placeholder="請輸入身份證"
clearable
prefix-icon="Search"
maxlength="18"
show-word-limit
autofocus
style="width: 260px"
@keyup.enter="selectIdCard"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="selectIdCard">確定</el-button>
</el-form-item>
</el-form>
回車后截圖如下
總結(jié)
到此這篇關(guān)于Element plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法的文章就介紹到這了,更多相關(guān)el-input框回車觸發(fā)頁面刷新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue3中watch用法的相關(guān)資料,文章中有詳細的代碼示例,需要的朋友可以參考下2023-04-04
Vue3使用vue-router如何實現(xiàn)路由跳轉(zhuǎn)與參數(shù)獲取
這篇文章主要介紹了Vue3使用vue-router如何實現(xiàn)路由跳轉(zhuǎn)與參數(shù)獲取，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue.js?是一個流行的?JavaScript?框架,用于構(gòu)建用戶界面,它提供了一種簡潔的方式來管理和渲染數(shù)據(jù),同時也支持與其他庫和工具的集成,本文主要來和大家聊聊如何在vue中使用canvas,有需要的可以參考下2023-09-09
這篇文章主要介紹了vue的mixins屬性詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue項目中引入vue-datepicker插件，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue從零實現(xiàn)一個消息通知組件的方法,結(jié)合實例形式分析了vue實現(xiàn)消息通知組件的具體原理、實現(xiàn)步驟、與相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
vue基礎(chǔ)之事件v-onclick="函數(shù)"用法示例
這篇文章主要介紹了vue基礎(chǔ)之事件v-onclick="函數(shù)"用法,結(jié)合實例形式分析了vue.js事件v-on:click="函數(shù)"的data數(shù)據(jù)添加、點擊響應(yīng)、以及留言本功能相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
vue + Electron 制作桌面應(yīng)用的示例代碼
這篇文章主要介紹了vue + Electron 制作桌面應(yīng)用,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-11
Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定詳細講解
這篇文章主要介紹了Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
解決ElementUI組件中el-upload上傳圖片不顯示問題
這篇文章主要介紹了解決ElementUI組件中el-upload上傳圖片不顯示問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10