vue对话框置空

最新推荐文章于 2025-05-01 19:33:49 发布

埃达Ada

最新推荐文章于 2025-05-01 19:33:49 发布

阅读量97

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/2301_76522234/article/details/134374786

版权

文章讲述了前端开发中遇到的问题，即如何在点击关闭对话框按钮时清空表单并确保验证失效。作者发现使用`this.$refs[formName].resetFields()`方法结合将v-model关联的数据设为可以解决对话框无法关闭的问题，强调了`ref`引用和数据管理的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近前端遇到需要关闭对话框时置空

上网查询大部分方法是：

在关闭对话框按钮中添加如下代码：

this.$refs[formName].resetFields(); // 重置表单移除校验

（formName是ref参照名）

但是我加上后对话框关不掉，最后这个方法可行：

把v-model关联的数据都设置成""即可。

这里没有data{return{}}，所以不是this.而是datas.

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

埃达Ada

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue的form表单在提交成功后置空

qq_38932474的博客

08-11

1269

vue的form表单在提交成功后置空 form表单说明：form表单加上属性值 ref=“form” 点击事件加入 roleManager.$refs[‘form’].resetFields() (这里的roleManager指的是当前即this)

69.Vue+elementUI表格点击编辑按钮后没改数据，关闭弹框，再次点击编辑按钮，弹框里数据为空（已解决）

银河与猫的博客

11-11

1936

前言：在项目开发中，发现，第一次点编辑，弹框里数据赋值过来了，但关闭弹框，再次点击此条数据的编辑按钮，会发现，弹框里所有数据都为空，这是因为第一次打开没有改变数据，没有提交，数据内容不变，所以第二次打开弹框，监听的此条数据没有变化，即监听不起作用了解决方法就是，在父组件watch里监听新增编辑弹框的visible，如果为false时，就将传给子组件的rowData数组设置为空数组。 watch:{ dialogFormAddEdit(value){ if(value == f

参与评论您还未登录，请先登录后发表或查看评论

vue 全局Dialog关闭内容置空

m0_55892953的博客

12-28

636

main.js Vue.prototype.$reset = function(formRef, ...excludeFields) { if(formRef){ this.$refs[formRef].resetFields(); } let obj1 = this.$data; let obj2 = this.$options.data.call(this) if(!excludeFields || excludeFields.length =

vue弹出框内的数据无法置空解决方法

qq_42808095的博客

07-25

418

vue弹出框内的数据无法置空解决方法

vue 如何在关闭对话框时将表单重置为空

qq_37969201的博客

10-29

986

closeForm方法如下： closeForm() { this.$refs.ruleForm.resetFields() }

vue中对话框关闭以后清空对话框中input，select内容

qq_38372917的博客

11-21

8896

首先需要确定要关闭的对话框，在对话框中写入关闭和要调用的函数例如：@close="handleClose" 在methods:{ handleClose() { for (let key in this.form) { this.form[key] = ' '; } } } 注：this.form 指的是对话框中el-form 绑定的...

8-Vue中使用elment的el-dialog，关闭对话框清除表单信息

sinat_41124751的博客

04-24

4155

用Vue做增删改查的简单页面操作，点击新增按钮弹出对话框，以form表单的形式展现，在输入框中填写信息确定提交，但第二次点击后总会有上次的信息存在，所以关闭弹窗后，需要清除对话框中表单的所有信息 1.首先在div布局中放置button按钮 <el-button @click="handleAdd()">新建</el-button> 2.编写弹窗在di...

vue+element-ui 关闭对话框清除验证和表单内容

热门推荐

qq_36437172的博客

03-04

1万+

在项目中遇到对话框关闭或者取消后，再次打开验证错误或者表单内容依然存在的效果，如下： 1、首先在你的对话框 取消按钮加一个click事件， <div slot="footer" class="dialog-footer"> 　　<el-button @click="handleCancel('form')">取消</el-button> &...

vue学习之elementUI清除对话框中表单校验

King的博客

07-29

1341

问题：关闭对话框重新打开时，发现表单校验还是存在~ 解决方法一：在关闭对话框按钮中添加如下代码： this.$refs[formName].resetFields(); // 重置表单移除校验注意：formName是ref参照名这个方法有个弊端，当不上点击关闭按钮关闭对话框时，如点击旁边空白，或者右上角x时，表单校验还是存在。此时需要使用方法二。解决方法二：只需要在From标签上加上v-if="showDialog"这句代码，当关闭弹框时showDialog=false。showDialo

【JavaScript系列】vue项目中实现滚动条（具体视窗口的滚动条）操作：（1）置底，（2）置于上次停留的位置

saucxs

07-05

1729

一、前言之前写了一个happyChat的项目，主要是想学习一下socketIO的使用。然后最近在给happyChat做前端优化和升级。发现第一版做的很low。需要优化的问题： 1、问题1：滚动条会出现在头部和底部的视窗中，之前固定头部和固定底部是使用`position:fixed`。解决方案：body和html禁止`overflow:hidden`，头部和底部是`position:r...

【若依前后端分离】对话框/模态框el-dialog设置

敲厉害的燕宝的博客

02-06

1612

单个添加：el-dialog 加上：close-on-click-modal='false'全部添加：在main.js中添加。

vue 使用高德地图制作一个搜索，地图选址的组件

阮俊维的博客

01-06

1976

vue 使用高德地图制作一个搜索，地图选址的组件效果展示引入高德地图子组件，上完整代码父组件使用，组件为全局注册，表单中的样式自己写效果展示效果展示引入高德地图 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key去高德申请很快&plugin=AMap.MouseTool,Amap.PlaceSearch,Amap.Geocoder"></scri

Vue实战篇三十五：实现滑动拼图验证登录

我的博客

10-20

6360

Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 Vue基础篇四：Vue的生命周期（秒杀案例实战） Vue基础篇五：Vue的指令 Vue基础篇六：Vue使用JSX进行动态渲染 Vue提高篇一：使用Vuex进行状态管理 Vue提高篇二：使用vue-router实现静态路由 Vue提高篇三：使用vue-router实现动态路由 Vue提高篇四：使用Element UI组件库 Vue提高篇五：使用Jest进行单元测试 Vue提高篇六：使用Vet

watch 数组 Vue 3

qq_30049249的博客

05-01

154

发现在选项式中配置 watch 监听数组不起作用。且在 setup 中监听数组时，当不设置 deep 参数时，也进行了深度监听。在 setup 中使用 watch 监听数组变化。

Vue 中局部指令（directives）的用法详解

jingling555的博客

04-28

401

局部指令适合封装特定组件的功能，而全局指令则更适合应用于整个应用的通用功能。

JavaWeb：vue&axios

IT瘾君子的博客

04-28

346

JavaWeb、vue、axios、Ajax

【Vue bug】:deep()失效