vue el-input 使用 回车键会刷新页面的问题

news2024/11/15 10:11:11

场景:
vue项目中 在输入框输入字符并按下回车键搜索时,不会进行搜索, 而是会刷新页面

原因:
当form表单中只有一个input时,按下回车建会自动触发页面的提交功能, 产生刷新页面的行为

解决:

在 el-form 中 加个 @submit.native.prevent,就可以了,

 

 <el-form ref="form" :model="form" :rules="rules" label-width="80px" @submit.native.prevent>
        <el-form-item label="名称" prop="catalogueName">
          <el-input
            v-model.trim="form.catalogueName"
            clearable
            maxlength="11"
            placeholder="请输入名称"
            show-word-limit
          />
        </el-form-item>
 </el-form>

 

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

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

相关文章

【Matlab】绘图代码模板

matlab绘图代码模板 matlab官方帮助文档平面基本绘图(2D):单曲线图多曲线图 官网模板单曲线图条形图误差条形图极坐标图针状图散点图3D等高线图热图 进阶版绘图好看的折线图柱状图统计直方图离散数据杆状图二维曲线二维散点图二维渐变图条形图填充图多Y轴图二维场图三维曲线图三…

“华为杯”研究生数学建模竞赛2016年-【华为杯】A题:多无人机协同任务规划

目录 摘 要&#xff1a; 1. 问题重述 1 . 1 问题背景 1 . 2 需要解决的问题 2. 模型的假设 3. 符号说明 4. 问题一&#xff08;协同侦察&#xff09; 4 . 1 问题分析及模型建立 4 . 2 问题求解 4.2.1 加载 S-1 型载荷的无人机的航迹优化 4.2.2 加载 S-2 型载荷的无人机的航迹优…

【java安全】无Commons-Collections的Shiro550反序列化利用

文章目录 【java安全】无Commons-Collections的Shiro550反序列化利用Shiro550利用的难点CommonsBeanutils1是否可以Shiro中&#xff1f;什么是serialVersionUID&#xff1f;W 无依赖的Shiro反序列化利用链POC 【java安全】无Commons-Collections的Shiro550反序列化利用 Shiro5…

【JMeter】 使用Synchronizing Timer设置请求集合点,实现绝对并发

目录 布局设置说明 Number of Simulated Users to Group Timeout in milliseconds 使用时需要注意的点 集合点作用域 实际运行 资料获取方法 布局设置说明 参数说明&#xff1a; Number of Simulated Users to Group 每次释放的线程数量。如果设置为0&#xff0c;等同…

21.Netty源码之编码器

highlight: arduino-light Netty如何实现自定义通信协议 在学习完如何设计协议之后&#xff0c;我们又该如何在 Netty 中实现自定义的通信协议呢&#xff1f;其实 Netty 作为一个非常优秀的网络通信框架&#xff0c;已经为我们提供了非常丰富的编解码抽象基类&#xff0c;帮助我…

帕累托森林:IEEE Fellow唐远炎院士出任「儒特科技」首席架构官

导语 「儒特科技」作为一家拥有全球独创性极致化微内核Web引擎架构的前沿科技企业&#xff0c;从成立即受到中科院软件所和工信部的重点孵化及扶持&#xff0c;成长异常迅速。前不久刚正式官方融入中国五大根操作系统体系&#xff0c;加速为其下游上千家相关衍生OS和应用软件企…

Dockerfile构建MySQL镜像(yum方式)

目录 Dockerfile构建MySQL镜像 1、建立工作目录 2、编写Dockerfile文件 3、构建镜像 4、测试容器 Dockerfile构建MySQL镜像 1、建立工作目录 [roothuyang1 ~]# mkdir mysql [roothuyang1 ~]# cd mysql/ 2、编写Dockerfile文件 [roothuyang1 mysql]# vim Dockerfile 配置如…

软件外包开发的GO开发框架

近些年GO语言使用的越来越多&#xff0c;尤其是在web应用开发和高性能服务器的项目里。在开发新项目时掌握一些常用的开发框架可以节省开发时间提高工作效率&#xff0c;也是对软件开发人员基本的技能要求。今天和大家分享一些常见的GO语言开发框架&#xff0c;希望对大家有所帮…

redis原理 6:小道消息 —— PubSub

前面我们讲了 Redis 消息队列的使用方法&#xff0c;但是没有提到 Redis 消息队列的不足之处&#xff0c;那就是它不支持消息的多播机制。 img 消息多播 消息多播允许生产者生产一次消息&#xff0c;中间件负责将消息复制到多个消息队列&#xff0c;每个消息队列由相应的消费组…

OPENCV C++(一) 二进制和灰度原理 处理每个像素点值的方法

#include <opencv2/opencv.hpp> using namespace std; using namespace cv;必须包含的头文件&#xff01; 才能开始编写代码 读取相片 一般来说加个保护程序 不至于出error和卡死 Mat image imread("test.webp"); //存放自己图像的路径 if (image.empty()){p…

虚拟机网络图标不见了

有3台虚拟机之前正常运行的&#xff0c;有一天打开虚拟机发现2台虚拟机的网络连接图标不见了&#xff0c;也ping不通另外两台。 解决&#xff1a;在终端执行以下命令&#xff0c;即可ping通 [roothadoop103 ~]# sudo nmcli network off [roothadoop103 ~]# sudo nmcli network…

大数据Flink(五十六):Standalone伪分布环境(开发测试)

文章目录 Standalone伪分布环境(开发测试) 一、架构图 二、环境准备 三、下载安装包</

Android LinearLayout dynamic add child ImageView,Glide load,kotlin

Android LinearLayout dynamic add child ImageView&#xff0c;Glide load&#xff0c;kotlin images.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"andro…

postgresql|数据库|MySQL数据库向postgresql数据库迁移的工具pgloader的部署和初步使用

前言&#xff1a; MySQL数据库和postgresql数据库之间的差异并不多&#xff0c;这里的差异指的是对SQL语言的支持两者并不大&#xff0c;但底层的东西差异是非常多的&#xff0c;例如&#xff0c;MySQL的innodb引擎概念&#xff0c;数据库用户管理&#xff0c;这些和postgresq…

循环队列——数据结构与算法

&#x1f636;‍&#x1f32b;️Take your time ! &#x1f636;‍&#x1f32b;️ &#x1f4a5;个人主页&#xff1a;&#x1f525;&#x1f525;&#x1f525;大魔王&#x1f525;&#x1f525;&#x1f525; &#x1f4a5;代码仓库&#xff1a;&#x1f525;&#x1f525;魔…

24考研数据结构-哈夫曼树与哈夫曼编码

这里写目录标题 5.5树与二叉树的应用5.5.1 哈夫曼树和哈夫曼编码1. 带权路径长度的定义2. 哈夫曼树的定义&#xff08;最优二叉树&#xff0c;不唯一&#xff09;3. 哈夫曼树的构造4. 哈夫曼树的特点5.哈夫曼编码&#xff08;最短二进制前缀编码&#xff09; 数据结构&#xff…

Windows terminal 添加 git bash 解决git中文乱码显示问题

Windows terminal 添加 git bash 解决git中文乱码显示问题 在 windows terminal 中配置git 说明&#xff1a; 点击箭头选择设置 说明&#xff1a; 点击"添加新配置文件"配置名称命令行&#xff0c;可执行文件的具体语句 C:\Program Files\Git\bin\bash.exe启动目录…

【100天精通python】Day25:python的编程方式以及并发编程详解

目录 专栏导读 1 python的编程方式 2 顺序编程 3 面向对象编程 4 函数式编程 5 并发编程 5.1 多线程编程 threading模块常用用法 1 创建线程&#xff1a; 2 启动线程&#xff1a; 3 等待线程执行完毕&#xff1a; 4 获取当前活动线程数量&#xff1a; 5 获取当前线程…

elasticSearch常见的面试题

常见的面试问题 描述使用场景 es集群架构3个节点&#xff0c;根据不同的服务创建不同的索引&#xff0c;根据日期和环境&#xff0c;平均每天递增60*2&#xff0c;大约60Gb的数据。 调优技巧 原文参考&#xff1a;干货 | BAT等一线大厂 Elasticsearch面试题解读 - 掘金 设计阶…

Mac 安装不在 Apple 商店授权的应用程序

文章目录 一、场景介绍二、实操说明 一、场景介绍 在日常的工作生活中&#xff0c;发现一些好用的应用程序&#xff0c;但是出于某些原因&#xff0c;应用程序的开发者并没有将安装包上架到苹果商店。 那么这些优秀的应用程序下载安装以后就会出现如下弹框被拒之门外 二、实操…