Vue enter回車導(dǎo)致頁面刷新問題及解決
更新時(shí)間：2022年10月10日 16:33:49 作者：范特西Fantasy
這篇文章主要介紹了Vue enter回車導(dǎo)致頁面刷新問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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)加一個(gè)input文本框， 一個(gè)表單下，如果只有一個(gè)文本框時(shí)，按下回車將會觸發(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
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用tracking實(shí)現(xiàn)人臉識別/人臉偵測完整代碼
作為一個(gè)AI模型,人臉識別涉及到多個(gè)技術(shù)領(lǐng)域,下面這篇文章主要給大家介紹了關(guān)于vue使用tracking實(shí)現(xiàn)人臉識別/人臉偵測的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
vue實(shí)現(xiàn)虛擬滾動渲染成千上萬條數(shù)據(jù)
本文主要介紹了vue實(shí)現(xiàn)虛擬滾動渲染成千上萬條數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
使用vue ant design分頁以及表格分頁改為中文問題
這篇文章主要介紹了使用vue ant design分頁以及表格分頁改為中文問題，具有很好的參考價(jià)值，希望對大家有所幫助。2023-04-04
這篇文章主要介紹了詳解vue中l(wèi)ocalStorage的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
指令是Vue.js中一個(gè)重要的特性， 主要提供了一種機(jī)制將數(shù)據(jù)的變化映射為DOM行為。下面通過本文給大家分享Vue.js的組件和模板，需要的朋友參考下吧2017-10-10
vue+three.js實(shí)現(xiàn)炫酷的3D登陸頁面示例詳解
這篇文章主要為大家介紹了vue+three.js實(shí)現(xiàn)炫酷的3D登陸頁面示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue移動端項(xiàng)目渲染pdf步驟及問題小結(jié)
這篇文章主要介紹了vue移動端項(xiàng)目渲染pdf步驟,vue-pdf的插件在使用的過程中是連連踩坑的，基本遇到3個(gè)問題，分別在文中給大家詳細(xì)介紹，需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了Vue首屏?xí)r間指標(biāo)采集最佳方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
本文通過實(shí)例代碼給大家介紹了vue生命周期和react生命周期對比 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
Vue3+Vite4項(xiàng)目進(jìn)行性能優(yōu)化的配置方案
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Vite4對項(xiàng)目進(jìn)行性能優(yōu)化的相關(guān)配置,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04