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
随机推荐
- Django【第27篇】：ModelForm
基于Form组件实现的增删改和基于ModelForm实现的增删改 一.ModelForm的介绍 ModelForm a. class Meta: model, # 对应Model的 fields=No ...
- HDU 5418 Victor and World （状态压缩dp）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5418 题目大意:有n个结点m条边(有边权)组成的一张连通图(n <16, m<100000 ...
- Python---tkinter---贪吃蛇(能用的)
项目分析:构成:蛇 Snake食物 Food世界 World蛇和食物属于整个世界 class World: self.snake self.food上面代码不太友好我们用另外一个 ...
- awk基础学习
2019-12-20 需要巧记,很多格式,学习难度:grep.sed.awk awk知识概述 1三剑客awk命令介绍2三剑客awk命令执行原理语法结构3三剑客awk命令实操练习查询替换信息排除(取反) ...
- linux运维、架构之路-PHP编译常见报错及解决方法
1. configure: error: xslt-config not found. Please reinstall the libxslt >= 1.1.0 distribution 复制 ...
- linux运维、架构之路-linux基础优化
1.查看linux版本 cat /etc/redhat-release #CentOS release 6.9 (Final) ————>查看版本号 uname -m #x86_64 ————& ...
- sublime格式化
https://nodejs.org/dist/v6.2.0/node-v6.2.0-x64.msi sublime格式化
- C++ 对象间通信框架 V2.0 ××××××× 之（四）
类定义:CMemberFuncPointer ======================================================================= // Me ...
- 使用java操作elasticsearch之与es简历连接
Elasticsearch 的 Java 客户端非常强大:它可以建立一个嵌入式实例并在必要时运行管理任务. 运行一个 Java 应用程序和 Elasticsearch 时,有两种操作模式可供使用.该应 ...
- 你还没搞懂this？
一.前言 this关键字是JavaScript中最复杂的机制之一.它是一个很特别的关键字,被自动定义在所有函数的作用域中.对于那些没有投入时间学习this机制的JavaScript开发者来说,this ...