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 ...
随机推荐
- pycharm 添加注册码
https://blog.csdn.net/u014044812/article/details/78727496
- Python——Pygame实现生命游戏(game of life)
模块:pygame import pygame,sys,time,random from pygame.locals import * """Color"&qu ...
- 洛谷 P1877 [HAOI2012]音量调节
P1877 [HAOI2012]音量调节 题目描述 一个吉他手准备参加一场演出.他不喜欢在演出时始终使用同一个音量,所以他决定每一首歌之前他都需要改变一次音量.在演出开始之前,他已经做好一个列表,里面 ...
- Hadoop-2.6.0上的C的API訪问HDFS
在通过Hadoop-2.6.0的C的API訪问HDFS的时候,编译和执行出现了不少问题,花费了几天的时间,上网查了好多的资料,最终还是把问题给攻克了 參考文献:http://m.blog.csdn.n ...
- Android加载大图不OOM
首先,我们试着往sdcard里放一张400k的图片,但是分辨率是2560*1600 布局简单 <?xml version="1.0" encoding="utf-8 ...
- 67.nodejs取参四种方法req.body,req.params,req.param,req.body
转自:http://www.cnblogs.com/jkingdom/p/8065202.html 摘要: nodejs取参四种方法req.body,req.params,req.param,req. ...
- 14.字符串hash寻找第一个只出现一次的字符
//char 0-255一共256个 char getonebyhash(char *str) { if (str == NULL) { return '\0'; } char ch = '\0'; ...
- js深拷贝的实现方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- MarkDown study:
#MarkDown study:## 区块元素:### 段落和换行 段落:由一个或多个连续的文本行组成,它的前后要有一个以上的空行(空行的定义是显示上看起来像是空的,便会被视为空行.比方说,若某一行只 ...
- Flask框架简介
Flask框架诞生于2010年,是Armin ronacher 用python语言基于Werkzeug工具箱编写的轻量级Web开发框架! Flask本身相当于一个内核,其他几乎所有的功能都要用到扩展. ...