Vue enter回車導致頁面刷新問題及解決
更新時間：2022年10月10日 16:33:49 作者：范特西Fantasy
這篇文章主要介紹了Vue enter回車導致頁面刷新問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue enter回車導致頁面刷新
分頁中需要 輸入頁碼進行跳轉(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表單，回車導致form表單提交
解決方法
（1）去除外面的form表單
（2）在form表單內(nèi)加一個input文本框， 一個表單下，如果只有一個文本框時，按下回車將會觸發(fā)表單的提交事件
（3 ）在input加阻止事件
<input onkeypress="if (event.keyCode == 13) showResult();"/>
Vue按下enter默認刷新頁面bug
vue按下enter默認刷新頁面，原因是form表單里按下鍵盤會默認提交表單，而刷新頁面。
解決
代碼
@submit.native.prevent
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue點擊導航頁面實現(xiàn)自動滾動到特定位置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue+element遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vite2.0+vue3移動端項目實戰(zhàn)詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
ElementUI表單驗證validate和validateField的使用及區(qū)別
Element-UI作為前端框架,最常使用到的就是表單驗證,下面這篇文章主要給大家介紹了關(guān)于ElementUI表單驗證validate和validateField的使用及區(qū)別,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
vue封裝自定義指令之動態(tài)顯示title操作(溢出顯示,不溢出不顯示)
這篇文章主要介紹了vue封裝自定義指令之動態(tài)顯示title操作(溢出顯示,不溢出不顯示)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
axios全局請求參數(shù)設(shè)置,請求及返回攔截器的方法
下面小編就為大家分享一篇axios全局請求參數(shù)設(shè)置,請求及返回攔截器的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue.js是目前很火的一個前端框架，采用MVVM模式設(shè)計，它是以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建的。本文重點給大家介紹Vuejs開發(fā)環(huán)境搭建及熱更新的相關(guān)知識，需要的朋友參考下吧2018-09-09
關(guān)于net?6+vue?插件axios?后端接收參數(shù)問題
接到這樣一個項目需求是這樣的，前端vue?必須對象傳遞后端也必須對象接收，接下來通過本文給大家介紹下net?6+vue?插件axios?后端接收參數(shù)的問題,需要的朋友可以參考下2022-01-01
下面小編就為大家分享一篇vue.js,ajax渲染頁面的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue3之 Vue CLI多環(huán)境配置，通俗點說就是使用配置文件來管理多環(huán)境，實現(xiàn)環(huán)境的切換，西阿棉詳細內(nèi)容,需要的朋友可以參考一下2021-11-11