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
随机推荐
- 使用Spring.Net进行Webservice开发&发布遇到的问题
发布遇到的问题1: HTTP 错误 404.17 - Not Found 请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理. 最终解决时IIS的设置情况: 1.应用程序池的高级设置中 启用32 ...
- flask入门，Hello World！
flask这个框架简单易用,去年2018的使用份额已经快接近django了.入门首选,没有太多的要求. 接下来,写个Hello World吧 1.新手入门,如果你是在windows下使用的,需要先安装 ...
- jzoj6404. 【NOIP2019模拟11.04】B
题目描述 Description Input 从文件b.in中读入数据. 第丬行三个正整数 n, m, K. 接下来 n 行每行 m 个正整数, 表示矩阵A. Output 输出到文件b.out中. ...
- mysql Update语句 语法
mysql Update语句 语法 作用:用于修改表中的数据.广州大理石机械构件 语法:UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值 mysql Update语句 示例 ...
- 常用的JAVA第三方工具类
转自:https://www.jianshu.com/u/9c5cb1ee4c46 一. org.apache.commons.io.IOUtils 注解 说明 closeQuietly 关闭一个IO ...
- kohana学习经验
1.sql查询文件缓存使用 $tokens = DB::select('id', 'token') ->from('member') ->where('id', 'in', $users) ...
- 【BZOJ1521】Est（单调队列优化DP）
题意:From https://www.cnblogs.com/CXCXCXC/p/4725249.html 思路:本身就两维状态了,把问题关键s[i][j]写成二维比一维好写多了 #include& ...
- C# 创建临时文件（转帖）
1. 在临时文件只能够创建一个临时文件并返回该文件的完整路径 // 在临时文件只能够创建一个临时文件并返回该文件的完整路径: // C:\Documents and Settings\YourName ...
- All men are brothers
All men are brothers 牛客多校第九场E 给定n个人,起初互不认识 然后m各阶段 每个阶段有两个人x.y认识 求每个阶段选出四个人互不认识的方式 并查集 #include<bi ...
- 进阶2：Hadoop 环境搭建： hadoop3.1.1 jdk1.8 在centos6.5上的伪分布式安装
参考文章: https://blog.csdn.net/qq_38038143/article/details/82779016 https://blog.csdn.net/m0_37461645/a ...