Vue+element 回车查询页面刷新

问题描述:

form 表单出查询条件需要实现 input 输入完成后键盘回车查询:@keyup.enter=“handleQuery”,如果 form 里只有一个input,回车没有触发事件,而是刷新页面,放两个input就没问题

问题原因:

W3C 标准中有如下规定:

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

即:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。 如果希望阻止这一默认行为,可以在 < el-form > 上加一个@submit.native.prevent

解决方法:

阻止表单默认提交行为

  • form表单上加一个@submit.native.prevent
  • el-input 增加 @keyup.enter.native

vue2 示例:

<el-form @submit.native.prevent ><el-form-item><el-input v-model="num" @keyup.enter.native="handleQuery"></el-input></el-form-item><el-form-item><el-button @click="onCancel()">取消</el-button><el-button type="primary" @click="onNext">确定</el-button></el-form-item>
</el-form>

注意:
.native修饰符在vue3中被弃用
解决方法: < el-form > 添加 @submit.prevent

类似问题 vue项目中 点击提交按钮路由多了个问号

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/64735.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何编辑调试gradle,打印日志

在build.gradle.kts中输入 println("testxwg1 ") logger.lifecycle("testxwg2") logger.log(LogLevel.ERROR,"testxwg5") 点刷新就能看到打印日志了

基于Vue 3 简单自定义Table组件(乞丐版)

本技术文档介绍了如何使用 Vue 3 和 TypeScript 构建一个高度可定制的表格组件&#xff0c;并通过插槽支持自定义列内容。本文档将详细讲解表格组件的实现原理、结构、使用方法以及样式定制。 目录 组件概述组件结构使用案例 1. 组件概述 这个 Table 组件是一个高度可定制的…

jvm栈帧中的动态链接

“-Xss”这一名称并没有一个特定的“为什么”来解释其命名&#xff0c;它更多是JVM&#xff08;Java虚拟机&#xff09;配置参数中的一个约定俗成的标识。在JVM中&#xff0c;有多个配置参数用于调整和优化Java应用程序的性能&#xff0c;这些参数通常以一个短横线“-”开头&am…

怎么将pdf中的某一个提取出来?介绍几种提取PDF中页面的方法

怎么将pdf中的某一个提取出来&#xff1f;传统上&#xff0c;我们可能通过手动截取屏幕或使用PDF阅读器的复制功能来提取信息&#xff0c;但这种方法往往不够精确&#xff0c;且无法保留原文档的排版和格式。此外&#xff0c;很多时候我们需要提取的内容可能涉及多个页面、多个…

TCP常见问题

文章目录 一、两种状态图二、常见问题1、MSL是什么 3、为何等待2MSL3、为何三次握手&#xff0c;不握手、握手一次、两次行吗4、为何四次挥手&#xff0c;三次行吗&#xff0c;两次行吗 一、两种状态图 四次挥手 二、常见问题 1、MSL是什么 MSL是Maximum Segment Lifetime的英…

UG NX二次开发(C#)-机电概念设计-UIStyler中selection块选择信号等对象的过滤器设置

文章目录 1、前言2、创建机电概念设计的模型3、创建UIStyler4、在VS2022中创建NXOPEN CSHAP的工程5、设置信号与信号适配体的过滤器6、测试选择的对象1、前言 在UG NX二次开发过程中,经常会用到UIStyler中的Selection块,即是选择对象,选择对象由于其可以选择多种类型的对象…

线程知识总结(二)

本篇文章以线程同步的相关内容为主。线程的同步机制主要用来解决线程安全问题&#xff0c;主要方式有同步代码块、同步方法等。首先来了解何为线程安全问题。 1、线程安全问题 卖票示例&#xff0c;4 个窗口卖 100 张票&#xff1a; class Ticket implements Runnable {priv…

es 开启slowlog

在 Elasticsearch 中&#xff0c;slowlog&#xff08;慢日志&#xff09;是用来记录查询和索引操作的性能数据&#xff0c;帮助你诊断性能瓶颈。你可以为查询 (search slowlog) 和索引 (index slowlog) 配置慢日志。 数据准备 POST /products/_doc/1 {"product_name&quo…

前端yarn工具打包时网络连接问题排查与解决

最近线上前端打包时提示 “There appears to be trouble with your network connection”&#xff0c;以此文档记录下排查过程。 前端打包方式 docker启动临时容器打包&#xff0c;命令如下 docker run --rm -w /app -v pwd:/app alpine-node-common:v16.20-pro sh -c "…

基础数据结构---栈

顺序表实现 一、栈类的声明 栈是一种特殊的线性表&#xff0c;可以由顺序表来实现&#xff0c;也可以由链表来实现&#xff0c;这节课&#xff0c;我们采用顺序表来实现栈。 #include <iostream>#include <stdexcept>using namespace std;template<typename …

【YOLO 项目实战】(10)YOLO8 环境配置与推理检测

欢迎关注『youcans动手学模型』系列 本专栏内容和资源同步到 GitHub/youcans 【YOLO 项目实战】&#xff08;1&#xff09;YOLO5 环境配置与检测 【YOLO 项目实战】&#xff08;10&#xff09;YOLO8 环境配置与推理检测 【YOLO5 项目实战】&#xff08;10&#xff09;YOLO8 环境…

【蓝桥杯】43699-四平方和

四平方和 题目描述 四平方和定理&#xff0c;又称为拉格朗日定理&#xff1a; 每个正整数都可以表示为至多 4 个正整数的平方和。如果把 0 包括进去&#xff0c;就正好可以表示为 4 个数的平方和。 比如&#xff1a; 502021222 712121222; 对于一个给定的正整数&#xff0c;可…

基于语义的NLP任务去重:大语言模型应用与实践

引言 在自然语言处理&#xff08;NLP&#xff09;任务中&#xff0c;数据质量是模型性能的关键因素之一。重复或冗余的数据会导致模型过度拟合或浪费计算资源&#xff0c;特别是在大语言模型&#xff08;如 BERT、GPT 系列等&#xff09;训练和推理阶段。传统的基于字符匹配的…

【5G】5G 无线协议 Radio Protocols(一)

长期演进&#xff08;LTE&#xff09;无线电协议主要设计用于通过扁平架构提供PS服务&#xff0c;相比之前的代际&#xff0c;这代表了一个重大改进&#xff0c;它消除了支持电路交换&#xff08;CS&#xff09;服务和复杂架构中固有的复杂性。许多原始的LTE原则自第8版以来一直…

VMware ubuntu虚拟机网络配置

首先分清2个情况&#xff1a; 1、在使用笔记本时&#xff0c;WiFi联网使用时&#xff0c;使用的是无线网卡设备上网的。 2、无论是笔记本还是台式机&#xff0c;当接插网线上网时&#xff0c;使用的是以太网卡设备上网的。 以Windows11为例&#xff1a; &#xff08;1&#x…

springboot 与 oauth2 版本对应关系

以 springboot 稳定版本举例 jdkspringbootspring-authorization-server82.7.180.4.5173.0.131.0.5173.1.12开始支持 starter pom 依赖 <!-- 当前 boot 版本不支持 starter 时引入固定版本 --> <dependency><groupId>org.springframework.security</…

Y3编辑器教程7:界面编辑器

文章目录 一、简介1.1 导航栏1.2 画板1.3 场景界面1.4 控件1.4.1 空节点1.4.2 按钮1.4.3 图片1.4.4 模型1.4.5 文本1.4.6 输入框1.4.7 进度条1.4.8 列表 1.5 元件1.5.1 简介1.5.2 差异说明1.5.3 元件实例的覆盖、还原与禁止操作1.5.4 迷雾控件 1.6 属性1.7 事件&#xff08;动画…

分享一个把表格类型的数据转换成字符串,以表格样式输出,方便控制台和日志记录时更直观

调用实例&#xff1a; Console.WriteLine("Hello, World!");List<string[]> tabLog new List<string[]>(); tabLog.Add(new string[] { "编号", "姓名", "性别", "年龄","备注" }); tabLog.Add(new…

如何有效修复ffmpeg.dll错误:一站式解决方案指南

当您遇到提示“ffmpeg.dll文件丢失”的错误时&#xff0c;这可能导致相关的应用程序无法启动或运行异常。本文将详细介绍如何有效地解决ffmpeg.dll文件丢失的问题&#xff0c;确保您的应用程序能够恢复正常运行。 ffmpeg.dll是什么&#xff1f;有哪些功能&#xff1f; ffmpeg.…

精通Redis(一)

目录 1.NoSQL 非关系型数据库 2.Redis 3.Redis的java客户端 4.Jedis 4.1Jedis快速入门 4.2Jedis连接池及使用 5.SpringDataRedis和RedisTemplate 1.NoSQL 非关系型数据库 基础篇-02.初始Redis-认识NoSQL_哔哩哔哩_bilibili NoSQL与SQL的区别就在于SQL是结构化的、关联…