问题:

<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 键盘回车事件导致页面刷新的问题,路由多了一个问号的更多相关文章

  1. vue+element Form键盘回车事件页面刷新解决

    问题描述:如下代码所示,使用element-ui 中的el-form组件对table进行条件查询,当查询条件仅有一项时,使用@keyup.enter.native事件绑定回车事件,出现点击回车后,浏览 ...

  2. 键盘enter事件时间页面绑定

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js-enter提交表单导致页面刷新问题

    问题:当页面只有一个文本框时,使用键盘enter操作执行提交表单的时候,会导致页面进行刷新,并且参数也会自动添加到url中. 解决办法: 1.给form添加onsubmit=return false; ...

  4. vue 项目中如何在页面刷新的状态下保留数据

    1.问题:在vue项目中,刷新页面之后,我当前打开的所有菜单,都消失,我如何实现刷新之后页面仍然是刷新之前的状态 效果图: 解决方法: 使用vuex作状态管理: 将vuex里面的数据同步更新到loca ...

  5. jquery 键盘回车事件

    <input id="search" placeholder="输入要领用的资产条码" id="scanCode" type=&quo ...

  6. vue+element 页面输入框--回车导致页面刷新的问题

    el-form 后面加上 @submit.native.prevent

  7. JS移动端如何监听软键盘回车事件

    移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签  注意点:form ...

  8. 使用 elementUI 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新。

    使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面: 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新. ...

  9. Vue监听键盘回车事件

    在写页面时遇见了登录页需要加一个键盘回车事件. vue 的 v-on中有这样的修饰符 <input v-on:keyup.enter="submit"> 即<in ...

随机推荐

  1. XML结构,写到TreeView树上

    http://blog.csdn.net/ztzi321/article/details/44077563

  2. CSUOJ 1541 There is No Alternative

    There is No Alternative Time Limit: 3000ms Memory Limit: 262144KB This problem will be judged on Aiz ...

  3. xadmin列表页添加自定义工具栏toolbar

    通过xadmin的Plugin实现,adminx.py中 class Link2AdminPlugin(BaseAdminPlugin): link_2_admin = False def init_ ...

  4. JAVA File类 分析(二)

    本章開始介绍UNIX文件系统. 文件系统是怎样管理文件的呢?那咱们要先文件的存储介质開始--磁盘 磁盘是计算机系统的一个硬件设备,文件系统为了可以管理磁盘.对其进行了三层抽象(本文全部内容均指UNIX ...

  5. iOS Core Animation具体解释(四)AutoLayout中的动画

    原创blog.转载请注明出处 blog.csdn.net/hello_hwc 欢迎关注我的iOS SDK具体解释专栏 http://blog.csdn.net/column/details/huang ...

  6. MongoDB(六)java操作mongodb增删改查

    java操作mysql数据库的代码我们已经了如指掌了.增删改查,java对mongodb数据库也是类似的操作,先是数据库连接.再是进行操作. 首先我们进入进入admin数据库.然后建立自己的数据库te ...

  7. js---16原型链

    var p = {name:"sss"}; var c2 = Object.create(p,{age:32,salar:"eee"});//c2就继承了p的属 ...

  8. 浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结

    页面响应加载的顺序:   1.域名解析->加载html->加载js和css->加载图片等其他信息 DOM详细的步骤如下: 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚 ...

  9. HDU——T 4738 Caocao's Bridges

    http://acm.hdu.edu.cn/showproblem.php?pid=4738 Time Limit: 2000/1000 MS (Java/Others)    Memory Limi ...

  10. VC多线程临界区

    在使用多线程时,一般非常少有多个线程全然独立的工作.往往是多个线程同一时候操作一个全局变量来获取程序的执行结果.多个线程同一时候訪问同一个全局变量,假设都是读取操作,则不会出现故障. 假设是写操作,则 ...