1. 程式人生 > >VUE enter 回車 導致 頁面重新整理解決

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();"/>