Vue enter回車導(dǎo)致頁面刷新問題及解決
Vue enter回車導(dǎo)致頁面刷新
分頁中需要 輸入頁碼進(jìn)行跳轉(zhuǎn),但是卻出現(xiàn) 跳到指定頁面后,頁面也刷新了。從而無法滿足無刷新的分頁。最初代碼如下:
<form class="zh-skip" action=""> ? ? <input type="number" v-model="pageNumber" oninput="if(value<1)value=1" @keyup="goPageKeyUp($event)"> ? ? <button class="zh-btn-blue" type="button" @click="goPage()">跳轉(zhuǎn)</button> </form>
網(wǎng)上找資料后,得知造成 頁面刷新的原因是:
外層有form表單,回車導(dǎo)致form表單提交
解決方法
(1)去除外面的form表單
(2)在form表單內(nèi)加一個input文本框, 一個表單下,如果只有一個文本框時,按下回車將會觸發(fā)表單的提交事件
(3 )在input加阻止事件
<input onkeypress="if (event.keyCode == 13) showResult();"/>
Vue按下enter默認(rèn)刷新頁面bug
vue按下enter默認(rèn)刷新頁面,原因是form表單里按下鍵盤會默認(rèn)提交表單,而刷新頁面。
解決

代碼
@submit.native.prevent
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用tracking實現(xiàn)人臉識別/人臉偵測完整代碼
作為一個AI模型,人臉識別涉及到多個技術(shù)領(lǐng)域,下面這篇文章主要給大家介紹了關(guān)于vue使用tracking實現(xiàn)人臉識別/人臉偵測的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
vue實現(xiàn)虛擬滾動渲染成千上萬條數(shù)據(jù)
本文主要介紹了vue實現(xiàn)虛擬滾動渲染成千上萬條數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
使用vue ant design分頁以及表格分頁改為中文問題
這篇文章主要介紹了使用vue ant design分頁以及表格分頁改為中文問題,具有很好的參考價值,希望對大家有所幫助。2023-04-04
vue+three.js實現(xiàn)炫酷的3D登陸頁面示例詳解
這篇文章主要為大家介紹了vue+three.js實現(xiàn)炫酷的3D登陸頁面示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
Vue3+Vite4項目進(jìn)行性能優(yōu)化的配置方案
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Vite4對項目進(jìn)行性能優(yōu)化的相關(guān)配置,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04

