Vue enter回車導致頁面刷新問題及解決

Posted on by

Vue enter回車導致頁面刷新

分頁中需要 輸入頁碼進行跳轉，但是卻出現 跳到指定頁面後，頁面也刷新瞭。從而無法滿足無刷新的分頁。最初代碼如下:

<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()">跳轉</button>
</form>

網上找資料後，得知造成 頁面刷新的原因是:

外層有form表單，回車導致form表單提交

解決方法

（1）去除外面的form表單

（2）在form表單內加一個input文本框， 一個表單下，如果隻有一個文本框時，按下回車將會觸發表單的提交事件

（3 ）在input加阻止事件

<input onkeypress="if (event.keyCode == 13) showResult();"/>

Vue按下enter默認刷新頁面bug

vue按下enter默認刷新頁面，原因是form表單裡按下鍵盤會默認提交表單，而刷新頁面。

解決

代碼

@submit.native.prevent

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：