Vue3.0 + Element Plus｜踩坑：表单重置按钮resetForm失效

最新推荐文章于 2024-06-03 14:22:00 发布
最新推荐文章于 2024-06-03 14:22:00 发布
阅读量2.8k 收藏 2
点赞数 1
分类专栏： vue3.0+element plus 文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/StellaXiao98/article/details/118938025
版权

在项目过程中按照之前的经验写重置按钮时发现不生效，换了原生的重置按钮也不行。后来发现还是版本移植的问题。

vue2.0和vue3.0的语法不一样，在main.js中引入resetform函数时语法出错

// Vue2.0

Vue.prototype.resetForm = resetForm;





//Vue3.0

let app = createApp(App);

//...

app.config.globalProperties.resetForm = resetForm;

还是要多看官方文档啊！！

像我这样因为时间不充裕上手仓促的就容易踩这样很小白的坑QwQ

StellaXiao98
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
vue3.0+element-plus实现国际化语言，动态路由菜单demo
01-27
在本项目中，"vue3.0+element-plus实现国际化语言，动态路由菜单demo"，开发者采用最新的Vue.js 3.0框架与Element Plus UI库，构建了一个具有国际化功能和动态路由菜单的示例应用。这个项目对于学习Vue 3的新特性...
vue3-element-plus-typescript：基于vue-cli vite + vue3.0 + element-plus + typescript +模拟数据的后台管理系统列表页增删改查功能
02-14
vue3-element-plus-typescript基于vue-cli / vite + vue3.0 + element-plus +打字稿+ mock数据的后台管理系统列表页增删改查功能vue-cli版： : vite版： :系统模块数据是mock数据使用了Vue3.0全家桶，Element-plus和...
vue3表单重置不好用 proxy.resetForm(“queryRef“)
weixin_47194802的博客
07-21 898
在el-form-item 里面要添加prop,prop和ref缺一不可。今天开发新页面，发现重置不好用。我就对比了我的好用的页面。
vue3 弹窗 表格选择 回显插件
cuifeihu的博客
01-05 2115
<template> <div class="app-container"> <el-dialog :model-value="visiblechild" width="60%" :before-close="handleClose" title="适用商品类型"> <el-row :gutter="24"> <!--用户数.
vue3+element-plus表单重置resetFields方法不生效，解决办法
最新发布
蒙古国海军司令部
06-03 647
需求：当点击登录按钮时，登录表单弹出，当点击登录表单右上角的×时销毁表单，并清空表单。解决resetFields不生效问题！
Vue项目中登录页面使用表单验证
weixin_48837605的博客
09-23 1220
效果: 文档：VeeValidate 支持vue3.0 第一步：安装 执行命令 npm i vee-validate@4.0.3 第二步：导入 修改文件 src/views/login/index.vue,哪个页面使用表单验证就导入以下的信息进行注册使用 import { Form, Field } from 'vee-validate' components:{Form, Field} 第三步:将form表单部分的div换成Form,input需要校验的inpu..
Vue中重置表单无效问题及解决办法
liuxiaoqi_123的博客
10-26 2613
Vue中重置表单无效问题及解决办法
Vue3中的Proxy是什么，如何使用它来提高性能？
2301_77795034的博客
07-03 1464
在这个例子中，我们使用Proxy对象dataProxy来存储数据，同时定义了一个访问控制对象accessControl来控制数据的访问权限。在使用Proxy时，我们需要注意一些细节和安全问题，例如避免因为不当的使用而导致的内存泄漏、避免对Proxy对象的意外修改等。但是，有时候我们的数据结构比较复杂，比如嵌套的对象或数组，这时使用Proxy可以更精确地控制数据的变更。首先，我们来揭开Proxy的神秘面纱。当我们需要渲染一个包含大量数据的列表时，我们可以使用Proxy来监控列表的变化，从而触发列表的重渲染。
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
vue3.0-admin:vue3.0 +打字稿+ element-ui +后台系统
03-11
vue3-管理员 简介 vue3-admin是一个后台管理系统的前端页面展示，是由vue-cli4和elemnet-ui实现的。功能原则。虽然刚开始看起来可能略感疲惫降低（由于子组件功能单一，所以内部通信中断），但是对后续的维护具有...
Vue3 的Proxy
包磊磊的博客
02-28 1万+
Vue3 升级内容 全部使用ts重写（响应式、vdom、模板编译） 性能提升，代码量减少（打包出来的内容代码量少） 会调整部分API Object.defineProperty的缺点 深度监听需要一次性递归 无法监听新增属性/删除属性 (Vue.set Vue.delete) 无法原生监听数组，需要特殊处理 Proxy基本应用 Reflect作用 和 Proxy 能力 一一对应 规范化、标准化、函数式 代替Object上的工具函数 proxy完成响应...
el-form表单重置resetForm()不生效问题
qfCSDN的博客
09-27 7499
字段不清空 或者完全没效果 检查： el-form 是否绑定model,带有ref,并且绑定的是同一数组。 <el-form :rules="rules" ref="form" :model="form"> el-form-item绑定prop <el-form-item label="商品状态" prop="enabled"> <el-radio-group v-model="form.enabled"> <el
解决表单(Form)重置reset is not a function脚本出错
u010999809的博客
10-13 1万+
实际上很久之前遇到过一回，结果最近开发又遇到这个Bug，而且也折腾了我一些时间，比如说我在利用Ajax提交表单后，需要重置表单各项内容从交互上来避免用户重复提交，正常的表单HTML结构如下所示： 如果单纯需要采用JavaScript来重置，可以采用 document.getElementById('LoginForm').reset() 来实现，使用jQuery则使
vue3报错xxx.resetFields is not a function
m0_59006402的博客
06-01 1293
需求： 写添加或修改弹窗的时候，el-dialog 嵌套 el-form，当el-dialog关闭的时候，清空el-form 的校验。
vue3 antd项目实战——Form表单的重置【使用resetFields()重置form表单数据、清空输入框】
热门推荐
XSL_HR的博客
12-31 1万+
ant design vue组件库中的form表单有一个自带的重置函数——resetFields()。本期文章将借助resetFields函数，实现form表单的重置与清空。
记录一下自己vue 重置表单不生效原因
weixin_54351827的博客
03-22 1228
element 的 Form 组件提供了表单验证的功能，需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名。 有两点需要注意: 1.要有对应的 ref，且名字一致，表明重置哪个表单。 2.prop 设置的字段名要和 v-model 绑定的字段名一致，否则重置表单或进行自定义校验规则时不会生效。 仅使用重置功能时具体校验规则不必填，但要重置的字段一定要有对应的 prop。 每次打开表单的时候不要忘记初始化没有显示在页面上的一些数据，
Vue3.x 报 Uncaught TypeErrorObject(...) is not a function( Vue3对象不是函数解决思路)
m0_67392661的博客
03-02 2584
今天在vue3的练习时候发现我写的路由总是浏览器报错，仔细校验文档发现并没有错误啊，可总是报Uncaught TypeError:Object(…) is not a function的错误，看下图： 网上针对这个错误的解释都是重名啊、大小写错误啥的。很显然对于我这种老鸟（菜鸡）是不可能犯这种错误的。经过一顿折腾竟然是版本问题。。。。。。。。。。。 我查看了路由的版本号，3.5.1并不是最新的，理论上讲应该问题不大，但是还是抱着试一试的心态把vue相关的都升级了一遍，再次编译，竟然没有这个问题了。真不知道这
vue3+element-plus表单重置resetFields方法不生效踩坑
YSQ_qsy的博客
08-05 1万+
vue3+element-plus表单重置resetFields方法有时不生效
vue3.0+element Plus表单校验
05-28
在Vue3.0中，可以使用Vue3.0官方推荐的表单校验库VeeValidate或者使用Element Plus提供的表单校验功能。 下面是一个使用Element Plus表单校验的示例： 1. 在Vue3.0项目中，首先需要先安装Element Plus组件库： ``...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值