vue+element Form键盘回车事件页面刷新解决
问题描述：如下代码所示，使用element-ui 中的el-form组件对table进行条件查询，当查询条件仅有一项时，使用@keyup.enter.native事件绑定回车事件，出现点击回车后，浏览器会刷新页面的问题；
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="基金名称:" style="margin-bottom:0">
<el-input placeholder="基金名称" @keyup.enter.native="doFilter(5)" v-model="likeName"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:0">
<el-button class="btnCheck" @click="doFilter(5)" style="margin-bottom:0">查询</el-button>
</el-form-item>
</el-form>
搜索了问题触发原因，是由于当表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。
解决方案一：加一个隐藏的文本框，即表单不只有一个文本框，如下：
<el-form :inline="true" class="demo-form-inline" >
<el-form-item label="基金名称:" style="margin-bottom:0">
<el-input placeholder="基金名称" @keyup.enter.native="doFilter(5)" v-model="likeName"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:0;display:none;">
<el-input @keyup.enter.native="doFilter(5)"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:0">
<el-button class="btnCheck" @click="doFilter(5)" style="margin-bottom:0">查询</el-button>
</el-form-item>
</el-form>
element官方解决方案：在el-from 加上 @submit.native.prevent
<el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
<el-form-item label="基金名称:" style="margin-bottom:0">
<el-input placeholder="基金名称" @keyup.enter.native="doFilter(5)" v-model="likeName"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:0">
<el-button class="btnCheck" @click="doFilter(5)" style="margin-bottom:0">查询</el-button>
</el-form-item>
</el-form>
以上两种方案均可解决。
来源：https://segmentfault.com/a/1190000016034270
vue+element Form键盘回车事件页面刷新解决的更多相关文章
- vue中router-link的click事件失效的解决办法
title: vue中router-link的click事件失效的解决办法 toc: false date: 2018-12-04 16:28:49 categories: Web tags: vue ...
- JS移动端如何监听软键盘回车事件
移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签 注意点:form ...
- vue:element-ui输入框绑定回车事件
参考: https://segmentfault.com/q/1010000011347642 https://weiku.co/article/297/ vue监听input输入框的回车事件:key ...
- jquery 键盘回车事件
<input id="search" placeholder="输入要领用的资产条码" id="scanCode" type=&quo ...
- vue中常用的两中页面刷新的方式和页面回退
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n) router.push(location) 想要导航到不同的 URL,则使 ...
- vue通过路由传值及在页面刷新后如何保存值
1.普通的路由跳转 方式一:通过routerLinkTo方式,转为a标签的跳转,to里面相当于a标签的href路径 如下: 方式二:通过this.$router.push方式: 如下: 2.带参数的路 ...
- 移动端点击返回时强制页面刷新解决办法(pageshow)
在做移动端项目的时候经常遇到这样一个功能比如: 返回后页面不刷新,一些失效的信息依然显示在页面上.这个问题在iphone手机上会出现,在Android手机上返回时会自动刷新(由于手机机器种类不多,无法 ...
- vue 键盘回车事件导致页面刷新的问题，路由多了一个问号
问题: <el-form @submit.native.prevent> <el-form-item > <el-input @keyup.enter.native=&q ...
- vue+element 页面输入框--回车导致页面刷新的问题
el-form 后面加上 @submit.native.prevent
随机推荐
- C#知识点：委托、事件、正则表达式、SVN、找按段等差递增至不变序列的规律
using System; using System.Collections.Generic; using System.Text; namespace Delegate { //定义委托,它定义了可 ...
- BZOJ 3887: [Usaco2015 Jan]Grass Cownoisseur tarjan + spfa
Code: #include <bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) ...
- BZOJ 1304: [CQOI2009]叶子的染色 树形DP + 结论
Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) # ...
- [ZJU 1010] Area
ZOJ Problem Set - 1010 Area Time Limit: 2 Seconds Memory Limit: 65536 KB Special Judge Jer ...
- Leetcode 14. Longest Common Prefix(水)
14. Longest Common Prefix Easy Write a function to find the longest common prefix string amongst an ...
- #1024-JSP结构
JSP 结构 网络服务器需要一个JSP引擎,也就是一个容器来处理JSP页面.容器负责截获对JSP页面的请求. JSP容器与Web服务器协同合作,为JSP的正常运行提供必要的运行环境和其他服务,并且能够 ...
- es之IK分词器
1:默认的分析器-- standard 使用默认的分词器 curl -XGET 'http://hadoop01:9200/_analyze?pretty&analyzer=standard' ...
- 高通Camera bring up软件流程【转】
本文转载自:http://blog.csdn.net/liwei16611/article/details/51279658 高通camera bring up分为两种类型:YUV和bayerbrin ...
- Linux驱动开发6——DDR内存分配
1.kmalloc和kfree #include <linux/slab.h> void *kmalloc(size_t size, int flags); flag: GFP_ATOMI ...
- Linux中的NetworkManager网络管理
转载关于 NM_CONTROLLED和Network Manager Redhat在RHEL 6(Redhat Enterprise Linux),上搞了一个 Network manger 服务(同样 ...