当前位置: 首页 > news >正文

vue 设置了表单验证的el-input,在触发验证后无法继续输入的问题解决

问题表现

在这里插入图片描述

在项目中碰到的问题,说是input框出现验证提示后,该框就无法输入新的数据了

下面是我的代码:

// dom结构
<el-form ref="addForm" :rules="addFormRules" :model="addForm" label-width="100px" class="dialog--add--1228" width="70%"><el-form-item label="问题类型" prop="questionType"><el-input v-model="addForm.questionType"@blur="addForm.questionType = $event.target.value.trim()" class="form-item"></el-input></el-form-item><el-form-item label="类型描述" prop="typeDesc"><el-input type="textarea" v-model="addForm.typeDesc" @blur="addForm.typeDesc = $event.target.value.trim()" class="form-item"></el-input></el-form-item><el-form-item label="预计完成小时" prop="planHour"><el-input v-model="addForm.planHour" @blur="addForm.planHour = $event.target.value.trim()" class="form-item" placeholder="请输入正整数"></el-input></el-form-item>
</el-form>// js data数据
data(){return{addForm:{},addFormRules:{questionType:[{ required: true, message: '请填写问题类型(30字以内)', trigger: 'blur', min:1 , max: 30 }],typeDesc:[{ required: true, message: '请填写类型描述(500字以内)', trigger: 'blur', min:1 , max: 500 }],planHour:[{ required: true, message: '请输入预计完成小时数(正整数,<999)', trigger: 'blur', min:1 , max: 3 }],}}
},
methods:{showAddForm(){this.addForm = {};this.$refs.addForm.clearValidate();	    },
}

出现原因

查阅相关资料后,发现如果页面绑定了addForm的某个属性,必须初始化这个属性名才能正常识别和使用,例如页面上绑定的:prop=“addForm.questionType”,那么初始化时addForm必须是有questionType这个属性的

问题解决

完整地初始化addForm,声明初始化addForm的方法,在需要初始化addForm的地方调用

mounted(){this.initAddForm()
},
methods:{initAddForm(){// 初始化addFormthis.addForm = {questionType:"",typeDesc:"",planHour:""}},showAddForm(){this.initAddForm();this.$refs.addForm.clearValidate();	    },
}

可正常输入

相关文章:

vue 设置了表单验证的el-input,在触发验证后无法继续输入的问题解决

问题表现 在项目中碰到的问题&#xff0c;说是input框出现验证提示后&#xff0c;该框就无法输入新的数据了 下面是我的代码&#xff1a; // dom结构 <el-form ref"addForm" :rules"addFormRules" :model"addForm" label-width"100px&…...

基于smardaten无代码开发智能巡检系统,让无人机飞得更准

目录 引言需求背景搭建思路开发过程&#xff08;1&#xff09;无人机设备数据接入&#xff08;2&#xff09;无人机巡检任务管理&#xff08;3&#xff09;无人机三维防控监视&#xff08;4&#xff09;运防一体化大屏设计&#xff08;5&#xff09;异常告警管理&#xff08;6&…...

51项目——智能垃圾桶

51项目——智能垃圾桶 文章目录 51项目——智能垃圾桶项目需求项目材料(实物图可以百度看一看)接线实战编写部分代码(需要打包好的代码可以私我)效果视频结束项目需求 人靠近,垃圾桶开盖,投放垃圾,人离开,垃圾桶自动关盖。 并屏幕显示距离,和垃圾桶开关的状态。 项目材…...

HCIP——堆叠技术

堆叠 一、简介二、堆叠的优势1、提高可靠性2、简化组网3、简化管理4、强大的网络拓展能力 三、堆叠的方式1、堆叠卡堆叠2、业务口堆叠 四、堆叠的原理1、角色2、单机堆叠3、堆叠ID4、堆叠的优先级5、堆叠的建立过程 五、堆叠的配置 一、简介 堆叠技术 — 可以将多台真是得物理…...

芯片工程师求职题目之CPU篇(3)

1. 什么是cache(缓存)&#xff1f;它的工作原理是什么&#xff1f; Cache是少量的快速内存。它位于主存储器和中央处理器之间。每当CPU请求memory位置的内容时&#xff0c;首先检查cache中是否有此数据。如果数据存在于cache中&#xff0c;CPU直接从cache中获得数据。这是更快…...

Grounding dino + segment anything + stable diffusion 实现图片编辑

目录 总体介绍总体流程 模块介绍目标检测&#xff1a; grounding dino目标分割&#xff1a;Segment Anything Model (SAM)整体思路模型结构&#xff1a;数据引擎 图片绘制 集成样例 其他问题附录 总体介绍 总体流程 本方案用到了三个步骤&#xff0c;按顺序依次为&#xff1a…...

如何选择更快更稳定的存储服务器

选择更快、更稳定的存储服务器需要考虑以下几个方面&#xff1a; 存储介质&#xff1a;存储服务器的主要存储介质包括固态硬盘&#xff08;SSD&#xff09;和机械硬盘&#xff08;HDD&#xff09;。相比于机械硬盘&#xff0c;固态硬盘具有更高的读写速度和更低的延迟&#xf…...

此芯科技加入 openKylin 开源社区

导读近日消息&#xff0c;据此芯科技官方公众号表示&#xff0c;此芯科技目前已经签署 openKylin 社区 CLA&#xff08;Contributor License Agreement 贡献者许可协议&#xff09;&#xff0c;正式加入 openKylin 开源社区。 此芯科技成立于 2021 年&#xff0c;是一家专注于设…...

开发一个RISC-V上的操作系统(七)—— 硬件定时器(Hardware Timer)

目录 往期文章传送门 一、硬件定时器 硬件实现 软件实现 二、上板测试 往期文章传送门 开发一个RISC-V上的操作系统&#xff08;一&#xff09;—— 环境搭建_riscv开发环境_Patarw_Li的博客-CSDN博客 开发一个RISC-V上的操作系统&#xff08;二&#xff09;—— 系统引导…...

电池的正极是带正电?

首先说明结论&#xff1a;电池正极带正电&#xff0c;负极带负电。 一个错误的实例&#xff1a; 如果说电流是从电池正极流动到电池负极&#xff0c;那么电子就是从负极流动到正极&#xff0c;那么正极就是带负电。----这个说法是错误的。这是因为&#xff0c;根据那么很出名…...

Go 协程为什么比进程和线程占用的系统资源低?

1 介绍 进程是一个程序在执行时所占据的独立虚拟内存空间&#xff0c;Linux为每个进程分配一个虚拟内存空间&#xff0c;包括栈、未使用的内存、堆、BSS、DATA和TEXT等。 线程可以看作是轻量级的进程&#xff0c;多个线程在一个进程中“共生”&#xff0c;每个线程拥有独立的…...

性能测试—Jmeter工具

文章目录 性能测试1. 术语介绍2. 方法3. 应用场景4. 工具&#xff08;Jmeter&#xff09;4.1 介绍4.2 元件和组件4.2.2 元件4.2.1 组件 4.3 作用域4.4 参数化4.5 执行脚本 性能测试 1. 术语介绍 响应时间(Response time)&#xff1a;对请求作出响应所需要的时间。 在互联网上对…...

【分布式系统】聊聊高性能设计

每个程序员都应该知道的数字 高性能 对于以上的数字&#xff0c;其实每个程序员都应该了解&#xff0c;因为只有了解这些基本的数字&#xff0c;才能知道对于CPU、内存、磁盘、网络之间数据读写的时间。1000ms 1S。毫秒->微秒->纳秒-秒->分钟 为什么高性能如此重要的…...

自动驾驶数据集汇总

1.Nuscenes 数据集链接&#xff1a;nuScenes nuscenes数据集下有多个任务&#xff0c;涉及Detection&#xff08;2D/3D&#xff09;、Tracking、prediction、激光雷达分割、全景任务、规划控制等多个任务&#xff1b; nuScenes数据集是一个具有三维目标注释的大型自动驾驶数…...

面向对象的基本原则

背景 面向对象是抽象技术的一种实现&#xff0c;将对象作为真实世界中实体的抽象&#xff0c;代表了特定的一块密集而内聚的信息。在面向对象设计及实现中&#xff0c;重点考虑的就是如何做到关注点分离。因为对象内的联系通常比对象间的联系更强。关注点分离就是将对象中高频…...

C语言开发基础知识(一)

文章目录 数据类型宏变量函数inline 内联函数static 关键字的作用const 关键字的作用extern 关键字的作用volatile 关键字的作用include 关键字的作用数组、字符串指针堆内存管理结构体文件操作数据类型 C语言中数据类型分有符号和无符号,默认是有符号的。 有符号类型: 数据…...

​API网关类型与区别​

什么是API网关&#xff1f; 在现代软件架构中&#xff0c;API&#xff08;应用程序编程接口&#xff09;网关起着重要的作用。它是一个中间层&#xff0c;用于管理和控制应用程序之间的通信。API网关可以提供一些关键功能&#xff0c;如流量控制&#xff0c;安全认证&#xff…...

linux:nginx网站升级至http2

参考&#xff1a; 怎样把网站升级到http/2 - 知乎 HTTP/2 与 HTTP/1.1&#xff1a;它们如何影响 Web 性能&#xff1f; | Cloudflare 总结&#xff1a; nginx.conf修改 http2需要ssl支持 listen 443 ssl http2;...

Flutter:屏幕适配

flutter_screenutil flutter_screenutil是一个用于在Flutter应用程序中进行屏幕适配的工具包。它旨在帮助开发者在不同屏幕尺寸和密度的设备上创建响应式的UI布局。 flutter_screenutil提供了一些用于处理尺寸和间距的方法&#xff0c;使得开发者可以根据设备的屏幕尺寸和密度…...

中科亿海微ROM使用

标题 ROM&#xff08;Read-Only Memory&#xff0c;只读存储器&#xff09;是一种在FPGA&#xff08;Field-Programmable Gate Array&#xff0c;现场可编程门阵列&#xff09;中常用的存储器类型。与RAM&#xff08;Random Access Memory&#xff0c;机存取存储器&#xff09;…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

【JVM】Java虚拟机(二)——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...

对象回调初步研究

_OBJECT_TYPE结构分析 在介绍什么是对象回调前&#xff0c;首先要熟悉下结构 以我们上篇线程回调介绍过的导出的PsProcessType 结构为例&#xff0c;用_OBJECT_TYPE这个结构来解析它&#xff0c;0x80处就是今天要介绍的回调链表&#xff0c;但是先不着急&#xff0c;先把目光…...