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

ops/2024/11/17 14:24:33/
坑:

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

一开始我是这样写的

<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.ppmy.cn/ops/134446.html

相关文章

GitHub Copilot使用指南:助力开发者加速编程创新

GitHub Copilot使用指南&#xff1a;助力开发者加速编程创新 简介 1. GitHub Copilot的诞生背景 近年来&#xff0c;AI技术在各行各业迅速发展&#xff0c;尤其是在编程和开发领域&#xff0c;通过自然语言处理和机器学习&#xff0c;AI逐渐能够理解人类的需求和语言。GitHub…

深入理解Flutter生命周期函数之StatefulWidget(一)

目录 前言 1.为什么需要生命周期函数 2.开发过程中常用的生命周期函数 1.initState() 2.didChangeDependencies() 3.build() 4.didUpdateWidget() 5.setState() 6.deactivate() 7.dispose() 3.Flutter生命周期总结 1.调用顺序 2.函数调用时机以及主要作用 4.生…

微信小程序设置屏幕安全距离

<script setup> import { onMounted, ref } from vue; let url ref(); onMounted(() > { const windowInfo wx.getWindowInfo(); let safe_left 0; //屏幕左边安全距离 let safe_bottom 0; //屏幕底部安全距…

R语言数据分析可视化——summarytools包的使用

R语言中的summarytools包通过提供能够用最少的代码生成数据全面摘要的功能,使数据分析更加简单。summarytools包提供了一种简单的方法来生成数据集的摘要统计信息,包括描述性统计、频率表、交叉表、缺失值、异常值、相关性、线性回归、ANOVA、卡方检验等。本文将介绍如何使用…

Git与GitLab的企业实战 笔记(尚硅谷)

此笔记来自于尚硅谷 第1章 Git概述 Git是一个免费的、开源的分布式版本控制系统&#xff0c;可以快速高效地处理从小型到大型的各种项目。 Git易于学习&#xff0c;占地面积小&#xff0c;性能极快。 它具有廉价的本地库&#xff0c;方便的暂存区域和多个工作流分支等特性。…

【英特尔IA-32架构软件开发者开发手册第3卷:系统编程指南】2001年版翻译,2-25

文件下载与邀请翻译者 学习英特尔开发手册&#xff0c;最好手里这个手册文件。原版是PDF文件。点击下方链接了解下载方法。 讲解下载英特尔开发手册的文章 翻译英特尔开发手册&#xff0c;会是一件耗时费力的工作。如果有愿意和我一起来做这件事的&#xff0c;那么&#xff…

MySQL【七】

字符串函数 数学函数 日期函数 条件控制函数 类型转换函数 系统信息函数 自定义函数 DELIMITER  CREATE FUNCTION 函数名([参数名 参数数据类型[,…]])RETURNS 函数返回值的数据类型BEGIN函数体;RETURN 语句;ENDDELIMITER ;sql ########## 定义一个函数maxofthree()&#x…

faiss 提供了多种索引类型

faiss 多种索引类型 在 faiss 中&#xff0c;IndexFlatL2 是一个简单的基于 L2 距离&#xff08;欧几里得距离&#xff09;进行索引的索引类型&#xff0c;但实际上&#xff0c;faiss 提供了多种索引类型&#xff0c;支持不同的度量方式和性能优化&#xff0c;您可以根据需求选…