表单中设置了 `keyup.enter.native` 的按键事件，但是回车后没有执行查询，反而会刷新页面
场景
添加属性对话框中，input输入后点击 enter，不会执行绑定的 handleDialogQuery 事件，反而会刷新整个页面；
如果不点击 enter，点击搜索按钮，则是正常的。
又测试：在 属性组页面中，input 输入后点击 enter，是正常的，不会刷新整个页面。
解决办法：给 form 添加 @submit.native.prevent
原因
在一个 form 表单中，若只有一个 input，按回车键表单会自动提交，但是当表单中存在多个 input 时，按回车键不会执行任何操作，这是 form 表单的一个特性。
参考链接
表单中设置了 `keyup.enter.native` 的按键事件，但是回车后没有执行查询，反而会刷新页面的更多相关文章
- keyup.enter.native&click.native.prevent
vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符: <input v-on:keyu ...
- vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native
vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符:\ <input v-on:keyup.13="submit"> vue还非常贴心地给出了常用按键的别名, ...
- 在一个form表单中根据不同按钮实现多个action事件
<form id="writeForm" method="post"> <div class="write-btn-tj" ...
- 判断密码是否可见/判断登录的状态/判断在form表单中 定义rules规则验证(iview)
一: 判断密码是否可见判断:type="visiblePassword ? 'text' : 'password'" 是否为false 或者 true 密码为输入框或者文本框点击眼 ...
- 使用 elementUI 的表单进行查询，表单中只有一个文本框时，回车会自动触发表单的提交事件，导致页面的刷新。
使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面: 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新. ...
- 当使用vue的按键修饰符不起效果的时候怎么办?如@keyup.enter = '' ;
这个问题困扰了我一个多小时,各种测bug !始终测不出来! 直接上代码(错误示范) <el-form-item prop="password"> <el-inpu ...
- element-ui 的input组件 @keyup.enter事件的添加办法
<el-input placeholder="请输入密码" type="password" @keyup.enter.native="login ...
- ElementUI el-input标签 绑定keyup事件v-on:keyup.enter="convert"无效解决方案
期望实现,输入数字后,回车直接执行点击按钮"转换" 无效写法: <el-input v-model="input" placeholder="请 ...
- Vue element keyup.enter失效不起作用
解决方式一 添加按键修饰符@keyup.enter.native 解决方式二 把事件绑定到父元素(外框),需注意多个input问题 <div @keyup.enter="login&q ...
随机推荐
- GET 与 POST 其实没有什么区别
GET 与 POST 其实没有什么区别 本文写于 2020 年 12 月 30 日 GET 与 POST 是两种 HTTP 方法,并且是最常用的两种. 今天在使用 Postman 测试 api 的时候 ...
- python之贪婪算法
贪婪算法 贪婪算法也称为最优算法,这种算法并不是最准确的答案,但确认最接近答案的近似算法. 这时候有人会问,不是最准确的答案我要她干嘛?但是在日常中,我们有时候会遇到一些我们无法处理的问题,甚至是要花 ...
- 华为OPS，自定义命令，动态执行命令
OPS 开放可编程系统OPS(Open Programmability System)是指设备通过提供统一的应用程序接口API(Application Programming Interfa ...
- 219. Contains Duplicate II - LeetCode
Question 219. Contains Duplicate II Solution 题目大意:数组中两个相同元素的坐标之差小于给定的k,返回true,否则返回false 思路:用一个map记录每 ...
- MySQL体系结构与数据类型
layout: post title: "MySQL体系结构与数据类型" date: 2018-02-26 categories: MySQL tags: MySQL 一.MySQ ...
- dubbo是如何实现可扩展的？
dubbo如何实现可扩展的,援引官网描述: Dubbo 的扩展点加载从 JDK 标准的 SPI (Service Provider Interface) 扩展点发现机制加强而来. Dubbo 改进了 ...
- 16岁男生信息竞赛成瘾心理出现问题 妈妈：他竟说要AK我
16岁男生信息竞赛成瘾心理出现问题 -- 妈妈:他竟说要AK我 "我儿子最近快走火入魔了,医生,你救救他吧."40出头的林女士拉着儿子走进江苏省人民医院临床心理科.近几年,信息竞赛 ...
- 白嫖Azure与体验GoLand远程开发
前言 近期因为有本地开发远程使用Linux编译部署的需求,而虚拟机的性能实在是不敢恭维,WSL的坑之前也踩过(没有systemd等),故考虑使用SSH连接云服务器开发. 目前VSCode提出了Remo ...
- 一分钟学会如何自定义小程序轮播图（蜜雪冰城Demo）
最近开发小程序项目用到了轮播图,默认的有点单调,作为后端程序员,研究一番最终实现了.本文会从思路,代码详细介绍,相信读过此文后,不管以后在开发中碰到轮播图还是需要自定义修改其他的样式都可以按这个思路解 ...
- bintree
Python实现二叉树的建立与遍历 创建(二叉)树节点类 class Node: def __init__(self,data,l=None,r=None): self.val = data self ...