关于vue3 | element plus 表单绑定值后，再次输入无效的问题，以及ref和reactive的运用。

最新推荐文章于 2024-03-19 10:43:12 发布
最新推荐文章于 2024-03-19 10:43:12 发布
阅读量506 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46468916/article/details/132619353
版权

根据vue3官网API的反馈，我们会看到ref和reactive的解释。

ref

reactive

以上两个是我们在vue3中常用的两个属性，现在看上面两个图标出来的地方就会发现。

ref可以对赋值的参数进行重新修改，在表单中我们可以把编辑，修改等已经赋值过的表单运用ref方法。

 

而在方法中我们也只需要增加一个.value便可。

reactive只能用在于响应式代理。在表单编辑修改中运用reactive是不生效的，他避免对原始对象的修改。

更多请参考vue3官网API ：响应式 API：核心 | Vue.js (vuejs.org)

早茶与月光
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
关于element的表格数据行赋值给表单，会出现表单输入框无法输入的情况
qq_38181746的博客
01-13 1378
解决在表格数据行赋值给表单，会出现表单输入框无法输入的情况 有时候在点击表格的某一行，把这一行的数据赋值给Dialog弹窗，然后会出现输入框无法输入更改值的情况 这里有一些人用了一个粗暴的方法直接强制刷新，this.forceUpdate()，但是这个强制刷新，还衍生出了新问题：Input的表单校验失效了！所以使用了this.forceUpdate()，但是这个强制刷新，还衍生出了新问题：Input的表单校验失效了！所以使用了this.forceUpdate()，但是这个强制刷新，还衍生出了新问题：Inp
vue3使用响应式数据 + v-model导致响应式失效el-form表单无法输入的问题
好好学习天天向上
07-25 1514
原因就是 el-form 声明了ref=“service”，导致 state 中声明的 service 被覆盖，2者冲突了。重构vue2项目时发现的问题，原始项目使用的是。的值一样导致出现了这样的问题。其实vue3可以使用适配的。
vue3+element Plus form 作为子组件，从父组件如何赋值？
baixue0111的博客
03-19 768
vue3+element Plus form 输入框内输入内容不显示问题
vue3 ts页面赋值发现不生效
weixin_50216073的博客
07-19 348
vue3 ts 页面赋值不生效 ref和model 定义的名重了!
vue3中reactive赋值失败
qq_39933787的博客
05-09 1820
前提：标题绑定点击事件，对于ref定义的普通类型的数据可以实现改变数值，对于reactive定义的数据不能直接赋值 解决方法：再封装一层数据 如： 原本： let arr = reactive([]) =======> arr = [1,2,3] × 改为：let data = reactive({ arr: [] }) data.arr = reactive([1,2,3]) √ ...
vue table编辑后赋值失败方法和深拷贝方法
丑小鸭立志变天鹅的博客
08-31 252
【代码】vue table编辑后赋值失败方法和深拷贝方法。
基于Vue3和Element-plus的文章发布平台设计源码
04-08
文章发布平台 - 基于Vue3和Element-plus构建，包含39个文件，如VUE、JS、JSON、JPG、PNG、CJS、GITIGNORE、HUSKY和MD等。该系统是一个文章管理系统，使用Vue3技术栈，为用户提供了一个高效、易用的文章发布平台。
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
Vue3+Element Plus后台管理系统模版.zip
01-02
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...
vue3+element-plus+admin
最新发布
04-12
基于vue3和element-plus组件开发的项目管理平台，包含用户权限设置功能；
vue3对一个reactive对象重新赋值失去响应式问题
qq_46433453的博客
09-01 3036
reactive对象在异步中重新赋值失效问题
vue3 element-plus中，el-dialog组件内，无法通过ref获得组件实例
hookind的博客
07-26 5644
vue3 element-plus中，el-dialog组件内，无法通过ref获得组件实例 。 对话框中的内容是懒加载的，这意味着在对话框打开之前，默认插槽（个人理解为el-dialog标签内的内容）不会被渲染到DOM上。因此，如果你需要执行一个DOM操作或通过ref访问组件，可在open事件回调中进行。经过测试，发现可以通过opened事件回调（open不行），可以访问el-dialog中组件的实例。...
vue3之shallowRef以及使用对element-plus table的优化尝试
Jermyo的博客
04-01 1622
element-plus table 的 ref 替换 shallowRef 后发现表格减少了大概60%~70%的渲染时间，而且数据量越大渲染时间越久，视觉效果也就更明显。shallowReactive只会响应第一层的数据，大部分的表格数据结构也都能适用，如果遇到表格数据中还有对象的形式，也就是得使用ref的形式了那么又一个想法来了，那我是不是可以做成属性控制的呢？深层响应、浅层响应，外部属性传值控制就好了，默认内部shallowRef，如有特殊需要就ref。
antd vue3 form 表单的赋值和取值问题
2301_77643651的博客
06-14 3665
当点击编辑的时候给form表单赋值，如下图。最后在记录一下table 渲染按钮。
element-plus多选框表单验证有值却不通过
m0_73146522的博客
01-02 755
可以看到我的两个单词没有对应上，跟双向绑定相关用的是sysRoles，跟规则相关用的是role，因为之前觉得rules和prop对应上就可以了，没想到就是这个影响了表单验证，所以我把跟账号角色有关的都改成了role，表单提示就没有出错了。这种情况出现提示肯定是不合理的，这时候需要查看表单的各种配置是哪里出了问题。2.这里我只把和账号角色相关的验证单独例出来，避免混淆。暂时只想到了这么多，表单验证我经常会粗心大意，template表单。
elementplus中form表单的使用及讲解---快速上手
qq_56263094的博客
05-02 8084
这篇仅仅对于初学者，因为纯个人理解，后端er只需要会用就好啦 贴一个elementplus的官网Form 表单 | Element Plus (element-plus.org) 1.初识elementplus的form表单 <template> <el-form :model="form" label-width="120px"> <el-form-item label="Activity name"> <el-inpu....
vue3及element-plus坑总结
xiaoququ的博客
07-12 1606
原因因为push的并不是一个值，而是一个地址，数组都指向同一个地址每一次push就等同于改变了数组的地址，所以会导致每次都变成了最后push的内容。解决方法：将push的内容深拷贝一份再push。
在Vue框架项目里通过Element Plus实现表单验证
weixin_46795387的博客
08-18 8694
在Vue框架项目里通过Element Plus实现表单验证
vue3和element plus动态表单
06-11
Vue3和Element Plus可以很方便地实现动态表单。下面是一个简单的示例代码： ``` <el-form :model="formData" :rules="formRules" ref="form"> (field, index) in formFields" :key="index" :label="field....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值