vue3+element-plus==> el-form输入响应式失效踩坑!!!!!!!!!!

坑:

这个坑我是真没想到,找了半天原因...

一开始我是这样写的

<el-form :model="addForm" label-width="100px" ref="addForm"><!-- 表单内容 -->
</el-form>

输入框根本输入不了东西,或者有很高的延迟,不知道什么时候自己填进去了

用vue2的时候图方便一直都是这样写的

后面查了半天才发现,vue3就是不能这样写了

原因:

在 Vue 2 中,v-model 是通过 value 属性和 input 事件来实现双向绑定的,而 ref 是一个引用组件实例的方式,通常用来获取组件的实例,以便在父组件中访问和操作它。它们本质上不冲突,可以同时存在,因为 v-modelref没有直接干扰彼此的功能。

但在vue3中,v-model 被重新设计了。它不仅可以绑定一个值,还可以传递自定义的事件名称和 prop 名称。例如,你可以为 v-model 使用 modelValue 作为 prop,且它会自动监听 update:modelValue 事件。

那么这样就会导致:

ref 和 v-model 的冲突: 在 Vue 3 中,ref 用来引用组件实例,而 v-model 会通过 prop 和事件的方式来实现双向绑定,因此它们都需要依赖于组件的 props 和 events。如果你将 ref 和 v-model 同时绑定到同一个表单组件上,Vue 会产生冲突,因为它们在底层的实现上会干扰同一状态的操作。

解决方法:

其实ref  和 v-model设置不一样的值就好了

<el-form :model="addForm" label-width="100px" ref="addFormRef"><!-- 表单内容 -->
</el-form>

🆗🦌

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

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

相关文章

图像处理实验二(Image Understanding and Basic Processing)

图像理解&#xff08;Image Understanding&#xff09;和基本图像处理&#xff08;Basic Image Processing&#xff09;是计算机视觉领域的重要组成部分。它们涉及从图像中提取有用信息、分析图像内容、并对其进行处理以达到特定目的。图像理解通常包括识别、分类和解释图像中的…

第74期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以找…

Kafka - 启用安全通信和认证机制_SSL + SASL

文章目录 官方资料概述制作kakfa证书1.1 openssl 生成CA1.2 生成server端秘钥对以及证书仓库1.3 CA 签名证书1.4 服务端秘钥库导入签名证书以及CA根证书1.5 生成服务端信任库并导入CA根数据1.6 生成客户端信任库并导入CA根证书 2 配置zookeeper SASL认证2.1 编写zk_server_jass…

除了 Postman,还有什么好用的 API 调试工具吗

尽管 Postman 拥有团队协作等实用特性&#xff0c;其免费版提供的功能相对有限&#xff0c;而付费版的定价可能对小团队或个人开发者而言显得偏高。此外&#xff0c;Postman 的访问速度有时较慢&#xff0c;这可能严重影响使用体验。 鉴于这些限制&#xff0c;Apifox 成为了一…

matlab建模入门指导

本文以水池中鸡蛋温度随时间的变化为切入点&#xff0c;对其进行数学建模并进行MATLAB求解&#xff0c;以更为通俗地进行数学建模问题入门指导。 一、问题简述 一个煮熟的鸡蛋有98摄氏度&#xff0c;将它放在18摄氏度的水池中&#xff0c;五分钟后鸡蛋的温度为38摄氏度&#x…

【C#设计模式(8)——过滤器模式(Adapter Pattern)】

前言 滤液器模式可以很方便地实现对一个列表中的元素进行过滤的功能&#xff0c;能方便地修改滤器的现实&#xff0c;符合开闭原则。 代码 //过滤接口public interface IFilter{List<RefuseSorting> Filter(List<RefuseSorting> refuseList);}//垃圾分类public cla…

事件循环 -- 资源总结(浏览器进程模型、事件循环机制、练习题)

!!! 理解学习&#xff0c;有问题/补充欢迎指出&#xff0c;随时改正 !!! 事件循环 一、进程与线程二、浏览器进程模型三、为什么会存在事件循环机制四、事件循环机制五、代码场景模拟事件循环机制六、练习题(明天补充...) 一、进程与线程 进程&#xff08;Process&#xff09;…

九州未来再度入选2024边缘计算TOP100

随着数智化转型的浪潮不断高涨&#xff0c;边缘计算作为推动各行业智能化升级的重要基石&#xff0c;正在成为支持万物智能化的关键点。近日&#xff0c;德本咨询(DBC)联合《互联网周刊》(CIW)与中国社会科学院信息化研究中心(CIS)&#xff0c;共同发布《2024边缘计算TOP100》榜…

使用 start-local 脚本在本地运行 Elasticsearch

警告&#xff1a;请勿将这些说明用于生产部署 本页上的说明仅适用于本地开发。请勿将此配置用于生产部署&#xff0c;因为它不安全。请参阅部署选项以获取生产部署选项列表。 使用 start-local 脚本在 Docker 中快速设置 Elasticsearch 和 Kibana 以进行本地开发或测试。 此设…

【Linux】TCP原理

tcp协议段格式 源/目的端口号: 表示数据是从哪个进程来, 到哪个进程去;4 位 TCP 报头长度: 表示该 TCP 头部有多少个 32 位 bit(有多少个 4 字节); 所以TCP 头部最大长度是 15 * 4 6016 位校验和: 发送端填充, CRC 校验. 接收端校验不通过, 则认为数据有问题. 此处的检验和不光…

阿里巴巴通义灵码推出Lingma SWE-GPT:开源模型的性能新标杆

阿里巴巴通义灵码团队最近开源了一款名为Lingma SWE-GPT的自动化软件改进模型。这一模型在软件工程领域的应用中表现出色&#xff0c;首次在SWE-bench基准测试中达到了30.20%的解决率&#xff0c;这一成绩比Llama 3.1 405B高出22.76%&#xff0c;标志着开源模型在这一领域的重大…

MySQL Workbench导入数据比mysql命令行慢

1.数据量 包含2812979条数据的csv文件 2.myql命令行用LOAD DATA INFILE命令导入 耗时1分钟13秒 3.用MySQL Workbench导入 从第一天晚上22点到次日下午16点才导入了45万条数据 4.原因 MySQL Workbench导入csv数据是使用自带的python和一系列的python代码&#xff0c;而mys…

Redis高可用-主从复制

这里写目录标题 Redis主从复制主从复制过程环境搭建从节点配置常见问题主从模式缺点 Redis主从复制 虽然 Redis 可以实现单机的数据持久化&#xff0c;但无论是 RDB 也好或者 AOF 也好&#xff0c;都解决不了单点宕机问题&#xff0c;即一旦 redis 服务器本身出现系统故障、硬…

VMware虚拟机安装Win7专业版保姆级教程(附镜像包)

一、Win7镜像下载: 链接&#xff1a;https://pan.baidu.com/s/1tvN9hXCVngUzpIC6b2OGrA 提取码&#xff1a;a66H 此镜像为Win7专业版(收藏级镜像 已自用几年)&#xff0c;官方纯净系统没有附带任何其他第三方软件。 二、配置虚拟机 1.创建新的虚拟机。 这里我们以最新的VMware…

【C++】C++11特性(上)

✨✨欢迎大家来到Celia的博客✨✨ &#x1f389;&#x1f389;创作不易&#xff0c;请点赞关注&#xff0c;多多支持哦&#x1f389;&#x1f389; 所属专栏&#xff1a;C 个人主页&#xff1a;Celias blog~ 目录 一、列表初始化 二、std::initializer_list 三、右值引用和移…

jmeter常用配置元件介绍总结之定时器

系列文章目录 安装jmeter jmeter常用配置元件介绍总结之定时器 5.定时器5.1.固定定时器5.2.统一随机定时器5.3.Precise Throughput Timer5.4.Constant Throughput Timer5.5.Synchronizing Timer5.6.泊松随机定时器5.7.高斯随机定时器 5.定时器 5.1.固定定时器 固定定时器Cons…

【含开题报告+文档+PPT+源码】基于Spring Boot智能综合交通出行管理平台的设计与实现

开题报告 随着城市规模的不断扩大和交通拥堵问题的日益严重&#xff0c;综合交通出行管理平台的研究与实现显得尤为重要。现代城市居民对于出行的需求越来越多样化&#xff0c;对于交通信息的获取和处理能力也提出了更高的要求。传统的交通管理方式已经难以满足这些需求&#…

并发基础:(淘宝笔试题)三个线程分别打印 A,B,C,要求这三个线程一起运行,打印 n 次,输出形如“ABCABCABC....”的字符串【举一反三】

🚀 博主介绍:大家好,我是无休居士!一枚任职于一线Top3互联网大厂的Java开发工程师! 🚀 🌟 在这里,你将找到通往Java技术大门的钥匙。作为一个爱敲代码技术人,我不仅热衷于探索一些框架源码和算法技巧奥秘,还乐于分享这些宝贵的知识和经验。 💡 无论你是刚刚踏…

万字长文解读深度学习——ViT、ViLT、DiT

文章目录 &#x1f33a;深度学习面试八股汇总&#x1f33a;ViT1. ViT的基本概念2. ViT的结构与工作流程1. 图像分块&#xff08;Image Patch Tokenization&#xff09;2. 位置编码&#xff08;Positional Encoding&#xff09;3. Transformer 编码器&#xff08;Transformer En…

嵌入式硬件杂谈(一)-推挽 开漏 高阻态 上拉电阻

引言&#xff1a;对于嵌入式硬件这个庞大的知识体系而言&#xff0c;太多离散的知识点很容易疏漏&#xff0c;因此对于这些容易忘记甚至不明白的知识点做成一个梳理&#xff0c;供大家参考以及学习&#xff0c;本文主要针对推挽、开漏、高阻态、上拉电阻这些知识点的学习。 目…