vue+element Form鍵盤回車事件頁面刷新解決

阿新 • • 發佈：2018-12-20

ace for code com fault key item filter submit

問題描述：如下代碼所示，使用element-ui 中的el-form組件對table進行條件查詢，當查詢條件僅有一項時，使用@keyup.enter.native事件綁定回車事件，出現點擊回車後，瀏覽器會刷新頁面的問題；


&lt;el-form :inline="true"  class="demo-form-inline"&gt;
    &lt;el-form-item label="基金名稱:" style="margin-bottom:0"&gt;
    &lt;el-input placeholder="基金名稱" @keyup.enter.native="doFilter(5)"  v-model="likeName"&gt;&lt;/el-input&gt;
    &lt;/el-form-item&gt;
    &lt;el-form-item style="margin-bottom:0"&gt;
    &lt;el-button class="btnCheck" @click="doFilter(5)"  style="margin-bottom:0"&gt;查詢&lt;/el-button&gt;
    &lt;/el-form-item&gt;
 &lt;/el-form&gt;

搜索了問題觸發原因，是由於當表單只有一個文本框時，按下回車將會觸發表單的提交事件，導致頁面的刷新。

解決方案一：加一個隱藏的文本框，即表單不只有一個文本框，如下：


&lt;el-form :inline="true"  class="demo-form-inline" &gt;
    &lt;el-form-item label="基金名稱:" style="margin-bottom:0"&gt;
    &lt;el-input placeholder="基金名稱" @keyup.enter.native="doFilter(5)"  v-model="likeName"&gt;&lt;/el-input&gt;
    &lt;/el-form-item&gt;
    &lt;el-form-item style="margin-bottom:0;display:none;"&gt;
    &lt;el-input @keyup.enter.native="doFilter(5)"&gt;&lt;/el-input&gt;
    &lt;/el-form-item&gt;
    &lt;el-form-item style="margin-bottom:0"&gt;
    &lt;el-button class="btnCheck" @click="doFilter(5)"  style="margin-bottom:0"&gt;查詢&lt;/el-button&gt;
    &lt;/el-form-item&gt;
&lt;/el-form&gt;

element官方解決方案：在el-from 加上 @submit.native.prevent


&lt;el-form :inline="true"  class="demo-form-inline"  @submit.native.prevent&gt;
    &lt;el-form-item label="基金名稱:" style="margin-bottom:0"&gt;
    &lt;el-input placeholder="基金名稱" @keyup.enter.native="doFilter(5)"  v-model="likeName"&gt;&lt;/el-input&gt;
    &lt;/el-form-item&gt;
    &lt;el-form-item style="margin-bottom:0"&gt;
    &lt;el-button class="btnCheck" @click="doFilter(5)"  style="margin-bottom:0"&gt;查詢&lt;/el-button&gt;
    &lt;/el-form-item&gt;
&lt;/el-form&gt;

以上兩種方案均可解決。

來源：https://segmentfault.com/a/1190000016034270

vue+element Form鍵盤回車事件頁面刷新解決

ace for code com fault key item filter submit 問題描述：如下代碼所示，使用element-ui 中的el-form組件對table進行條件查詢，當查詢條件僅有一項時，使用@keyup.enter.native事件綁定回車事件，出

vue+element Form鍵盤迴車事件頁面重新整理解決

問題描述：如下程式碼所示，使用element-ui 中的el-form元件對table進行條件查詢，當查詢條件僅有一項時，使用@keyup.enter.native事件繫結回車事件，出現點選回車後，瀏覽器會重新整理頁面的問題； <el-form :inline="true" class="

點擊瀏覽器的返回按鈕或者手機上的返回按鈕頁面刷新解決方法

ati cat blog 解決方法 func 瀏覽器 on() try body 在頁面中的js代碼中加上下面這句話即可。window.onload = function(){ var url = window.location.href; va

Form提交表單後頁面刷新不跳轉的實現

cti value 提交頁面刷新 splay pan form提交屬性。 ram <form action="" id="" method="post" target="nm_iframe"> 　　<input type="text" id="i

vue.js頁面刷新出現閃爍問題的解決

瀏覽器如果中控 pla IE 同時 rem class line 因為瀏覽器是html從上到下執行，先執行Dom元素，然後執行javaScript元素，v-show、v-if實在javaScript中控制,當走到javaScript時，Dom元素已經開始走動，所以如果網

vue 監聽 input 回車事件

pla vue 有效 arc mod ram 修飾符沒有效果 mode <el-input size="small" placeholder="搜索..." v-model="searchParam.quick_query" @keyup.13="enter"&g

nignx部署Vue單頁面刷新路由404問題解決

oca stat 通配 not found ati str 路由 wrap tail 在linux下搭建nginx測試網頁的時候，正常打開可以訪問，當刷新後頁面出現404 not found的問題說明： vue-router 默認 hash 模式 —— 使用

button的onclick事件導致的XMLHttpRequest 頁面刷新

進行 https code 同步存在 XML 用戶體驗推薦哪裏情況：在form中定義了一個<button>，點擊時進行數據的取得。bug：先在form中輸入一個 fcode字段，再點<button>，控制臺輸出：【主線程中同步的 XMLHt

vue 頁面刷新

turn 註入需要 temp urn next div 新的 eth app.vue <template> <div id="app"> <router-view v-if="isRouterAlive"></rou

vue，下級頁面刷新導致路由跳轉帶過來的數據消失的解決方法

導致頁面 owa eof color query 刷新轉化 pri if(typeof(this.$route.query.result)==‘string‘){ //刷新時走這 }else{ //正常路由跳轉過來後就把數據塞到 localStorage

html form中回車事件

要控制這些行為，不需要藉助JS，瀏覽器已經幫我們做了這些處理，這裡總結幾條規則：如果表單裡有一個type=”submit”的按鈕，回車鍵生效。如果表單裡只有一個type=”text”的input，不管按鈕是什麼type，回車鍵生效。如果按鈕不是用input，而是用button，並且沒有加type，IE

vue 移動端鍵盤搜尋事件監聽

1、首先注意，input的type="serch" <input @keypress="searchGoods" type="serch" placeholder="搜尋商品"> 2、監聽keypress事件（1）KeyDown、KeyUp 事件這

解決vue頁面刷新後原先獲取的vuex中state消失的問題

聲明 listener item json repl tps event ace 狀態在 app.vue中的created函數中寫如下代碼：localstorage和sessionStorage都可以 //在頁面加載時讀取sessionStorage裏的狀態信息 if

html-javascript前端頁面刷新重載的方法匯總

res rip ack -- 方法總結 load 試題 sig class html-javascript前端頁面刷新重載的方法匯總 2014年8月31日 12227次瀏覽記得我在興安得力實習要轉正的時候，我領導象征性的給我出了一套測試題目，裏面就有js閉包和頁面刷新等

瀏覽器默認返回，頁面刷新

cati 混亂 class 沒有網上 anr 鏈接 http 使用當我們點擊瀏覽器默認的回退按鈕的時候，發現回退回來的頁面並沒有刷新，而是使用了瀏覽器緩存裏的數據，使得我當前頁面的單選按鈕顯示效果混亂了。從網上看到一方法 if(window.name!="hasLo

iframe頁面刷新

none ati window pad meid eid element blank src //方法1 document.getElementById(‘FrameID‘).contentWindow.location.reload(true); //方法2 do

頁面刷新跳轉後，導航欄高亮顯示跳轉前的點擊位置

欄目 storage 加載 null 隱藏 nload 二級 date split 需求：比如有一個二級或三四級的菜單欄，頁面不跳轉時實現高亮顯示是很容易的，網上有很多這樣的素材。但是頁面一跳轉，新頁面可就記不住你在上一個頁面點擊的位置了，也就不可能高亮顯示。並且很多時候，

html 頁面刷新

3.2 date() tostring 返回實現 spa 系統 tail 程序 JS 腳本方法1 setInterval 函數定時局部刷新用到jQuery裏面的setInterval方法，該函數每隔一段時間請求一次數據，然後將請求結果返回給前端HTML實現刷新。

KendoUI關於Grid頁面刷新賦值（不修改數據庫）

fresh 修改 png row -1 event var 技術 remove 1.Grid頁面某個字段修改賦值（不用刷新） var row = GG.data("kendoGrid").select(); var data = GG.data("kend

PHP 頁面刷新與跳轉的方法匯總

clas dsm 目標 type class ont utf-8 標簽 tex HTML meta標簽 <meta http-equiv=‘content-type‘ content="text/html;charset=utf-8"/> 實現頁面刷新 &

vue+element Form鍵盤回車事件頁面刷新解決

相關推薦