问题:

<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. expr---计算工具

    expr命令是一款表达式计算工具,使用它完成表达式的求值操作. expr的常用运算符: 加法运算:+ 减法运算:- 乘法运算:\* 除法运算:/ 求摸(取余)运算:% 语法 expr(选项)(参数) ...

  2. 2018上半年GitHub上最热门的开源项目

    关注GitHub的人都知道,这个平台上面有太多优秀的值得学习的开源项目了,这里总结了2018上半年GitHub上最热门的开源项目. 1: tensorflow https://github.com/t ...

  3. Android学习总结(2)——App客户端与服务器交互中的token

    学习Token Token是什么? Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Tok ...

  4. CSUOJ 1555 Inversion Sequence

    1555: Inversion Sequence Time Limit: 2 Sec  Memory Limit: 256 MBSubmit: 107  Solved: 34 Description ...

  5. vue --- 解读vue的中webpack.base.config.js

    const path = require('path') const utils = require('./utils')// 引入utils工具模块,具体查看我的博客关于utils的解释,utils ...

  6. #学习笔记#——JavaScript 数组部分编程(三)

    3.在数组 arr 末尾添加元素 item.不要直接修改数组 arr,结果返回新的数组 主要考察数组的concat方法,代码如下: arr.concat(item); concat 方法不修改原数组. ...

  7. 【基础篇】点击Button按钮更换图片

    我们在开发的过程中,往往为了美化界面的需要,会修改按钮的默认外观,而因为Android中的按钮有三种状态—默认,被点击,被选中.所以,如果要改变按钮的外观,需要对这三种情况都做出修改,也许在以往,我们 ...

  8. Mvc异步

    <h3>MVC 自带的yibu请求</h3> <%-- 1.要执行的方法,2.控制器,3.Ajax操作--%> <%using (Ajax.BeginForm ...

  9. Kinect 开发 —— 近距离探测

    如何将Kinect设备作为一个近距离探测传感器.为了演示这一点,我们处理的场景可能在以前看到过.就是某一个人是否站在Kinect前面,在Kinect前面移动的是人还是什么其他的物体.当我们设置的触发器 ...

  10. Spark 1.6.1 源码分析

    由于gitbook网速不好,所以复制自https://zx150842.gitbooks.io/spark-1-6-1-source-code/content/,非原创,纯属搬运工,若作者要求,可删除 ...