vue 键盘回车事件导致页面刷新的问题,路由多了一个问号
问题:
<el-form @submit.native.prevent>
<el-form-item >
<el-input
@keyup.enter.native="handleInputConfirm(obj)"
>
</el-input>
</el-form-item>
</el-form>
export default {
methods:{
handleInputConfirm(obj){
// ... 提交内容
}
}
}
回车后,重新刷新了页面,并且路由多了一个问号
http://localhost:3009/?#/admin
解决方案:
el-from 加上 @submit.native.prevent
<el-form @submit.native.prevent>
</el-form>
理由:
当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在 标签上添加 @submit.native.prevent。
...
...
...
vue 键盘回车事件导致页面刷新的问题,路由多了一个问号的更多相关文章
- vue+element Form键盘回车事件页面刷新解决
问题描述:如下代码所示,使用element-ui 中的el-form组件对table进行条件查询,当查询条件仅有一项时,使用@keyup.enter.native事件绑定回车事件,出现点击回车后,浏览 ...
- 键盘enter事件时间页面绑定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js-enter提交表单导致页面刷新问题
问题:当页面只有一个文本框时,使用键盘enter操作执行提交表单的时候,会导致页面进行刷新,并且参数也会自动添加到url中. 解决办法: 1.给form添加onsubmit=return false; ...
- vue 项目中如何在页面刷新的状态下保留数据
1.问题:在vue项目中,刷新页面之后,我当前打开的所有菜单,都消失,我如何实现刷新之后页面仍然是刷新之前的状态 效果图: 解决方法: 使用vuex作状态管理: 将vuex里面的数据同步更新到loca ...
- jquery 键盘回车事件
<input id="search" placeholder="输入要领用的资产条码" id="scanCode" type=&quo ...
- vue+element 页面输入框--回车导致页面刷新的问题
el-form 后面加上 @submit.native.prevent
- JS移动端如何监听软键盘回车事件
移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签 注意点:form ...
- 使用 elementUI 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新。
使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面: 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新. ...
- Vue监听键盘回车事件
在写页面时遇见了登录页需要加一个键盘回车事件. vue 的 v-on中有这样的修饰符 <input v-on:keyup.enter="submit"> 即<in ...
随机推荐
- apache-maven-3.0.4-bin.zip
http://zhidao.baidu.com/share/2a8974fd1546ef5f11ad9cccb3cabf88.html apache-maven-3.0.4-bin.zip
- Firefox 浏览器有用的插件
1.Undo Closed Tabs Button或Undo Closed Tabs Button (revived) 恢复关闭的标签页 2.NetVideohunter Video Download ...
- Ubuntu16.04添加HP Laserjet Pro M128fn打印机和驱动
一.全部设置->打印机->添加新打印机 添加打印机 二.选择自动搜索到的网络打印机HP Laserjet Pro M128fn,点击添加. 三.添加打印机完成,打印测试页进行测试. 四. ...
- 联想M4600 (110主板),安装正版win7 ,进入桌面后鼠标无法使用
问题:联想M4600 (110主板),安装正版win7 ,进入桌面后鼠标无法使用 原因: 110主板和win7系统问题,具体网上查询 处理: 修改bios 中 “USB Virtual KBS Sup ...
- package-判断安装应用是否存在
今天在修改一个bug的时候,遇到一个问题,就是一个应用卸载了以后,在超级用户权限界面仍然会加载进来这个应用的相关信息.自己修改的时候,为了方便,就直接使用了里面一个加载图标的代码作为条件,也就是说,如 ...
- 轻松使用 Redis slowlog
之前中秋项目搞活动,用户比较活跃 SE.Redis 频繁报 Timeout 异常,狂翻了一波 issues 发现提这个问题还蛮多的,作者非常频繁的提到使用 slowlog 这个命令进行排查,那么问题就 ...
- C/C++(共用体与枚举)
共用(Union)与枚举(Enum) 共同体 c语言中,不同的成员使用共同的存储区域的数据结构类型称为共用体.(共用,联合体),共用体在定义,说明,适用形式上与结构体相似.两者本质上的不同在于使用内存 ...
- MD基本语法介绍
Markdown基本语法介绍 前言 文本编辑器一般用的有富文本编辑器(也就是Word)和md了,但是wold太过于花里胡哨很多功能都用不上,所以就选择md了,简单实用,一对于我来说一般就用标题和列表就 ...
- KnockOut下的离开检测
<input type="text" class="form-control" data-bind="event:{ blur:$root.ch ...
- 微信小程序从零开始开发步骤(三)底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...