vue，编辑，关闭，resetFields()，后，再次打开同一条，编辑，不渲染了

张张的技术贴

已于 2022-03-14 11:25:30 修改

阅读量776

点赞数

分类专栏： vue element 难点文章标签： vue.js elementui 前端

于 2022-03-14 11:23:48 首次发布

本文链接：https://blog.youkuaiyun.com/zxp_smile/article/details/123474235

版权

难点同时被 3 个专栏收录

77 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

element

4 篇文章

订阅专栏

列表页，设置传递给编辑页面的id为空，int_id=null
<el-edit @refresh="fetchData" @closeEdit="dialogEditVisible = false, int_id=null" :int_id="int_id" :isVisible="dialogEditVisible"></el-edit>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

张张的技术贴

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue 原理整理

gxll499294075的博客

03-22

1万+

1. 组件化基础=>（MVVM模型）传统组件，知识静态渲染，更新依赖于操作DOM。 Vue的核心理念是数据驱动的理念，所谓的数据驱动的理念：当数据发生变化的时候，用户界面也会发生相应的变化，开发者并不需要手动的去修改dom。优点：不需要在代码中去频繁的操作dom了，这样提高了开发的效率，同时也避免了在操作Dom的时候出现的错误。 Vue.js的数据驱动是通过MVVM这种框架来实现的，MVVM 框架主要包含三部分：Model, View, ViewMode 数据驱动视图...

vue项目中我的收货地址功能做法（添加地址、编辑地址、删除地址、默认地址、省市区三级联动）

yangyangdt的博客

01-27

8542

vue项目中我的收货地址功能做法（添加地址、编辑地址、删除地址、默认地址、省市区三级联动）

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

浅谈vue中resetFields()使用注意事项

10-14

主要介绍了浅谈vue中resetFields()使用注意事项，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

新增编辑组件resetfields问题_编写Web组件的6个建议

weixin_33610261的博客

01-29

158

“组件化”是近几年web前端开发的趋势，关于如何设计出好的组件，本文总结了6点经验，希望对读者有所帮助。减少依赖尽量不要和其它组件共享变量，保持原子性，依赖过多会影响组件的可复用性和稳定性。尤其不要从路由中取参数（导航栏等本身就依赖路由的组件除外），例如：... this.type = $stats.params.type ...因为这样编写的组件相当于和路由绑定了，一旦路由发生变化，或者在其它页...

新增编辑使用同一个弹窗组件时resetFields()失效

qq_50275870的博客

09-27

814

elementui新增、编辑使用同一个表单组件的时候，resetFields()方法无效。可能存在的问题。

element-ui的表单重置方法resetFields()的坑，及简单解决。

热门推荐

斜杠的博客

09-18

3万+

其实之前就知道这个坑，网上其他人也说过。然后我勉强处理了一下。然后又制造了新的坑。这里记录一下。坑的产生 resetForm(formName) { this.$refs[formName].resetFields(); } 坑一：官方写法，api也没有说明。这些坑。解决方法：多实践，官方写法仅供参考。坑二：看这个写法知道this.$refs这个是必须d...

resetFields重置初始值不生效的原因

marsmoon的博客

12-30

8374

resetFields重置初始值不生效

电商后台管理4-商品列表及添加商品(list.vue和add.vue)

ljyahaha的博客

04-01

3523

1、商品列表页面商品列表的页面如图：这个页面其实比较简单，面包屑导航、搜索框、添加商品按钮，以及下面的表格，代码如图：基本比较容易，就一个过滤器需要实现，本身的创建时间是以毫秒显示出来，这里需要格式化为年月日时分秒的格式。首先在main.js中注册了全局过滤器（以下出自vue.js官网） Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达

哔哩哔哩Allen前端vue后台管理系统笔记

weixin_59820248的博客

01-09

3333

哔哩哔哩Allen前端vue后台管理系统笔记

07-vue_shop后台管理系统—订单管理

Minnor的博客

07-16

1299

订单管理功能这一部分比较简单，绘制页面，随后发送请求获取订单数据列表，然后是修改订单地址，查询物流信息。用到了新的组件：TimeLine时间轴

this.$refs[‘form‘].resetFields()方法重置表单无效的坑

m0_67391870的博客

03-05

1308

this.$refs[‘form’].resetFields()方法重置表单无效的坑 1、用法不对要想this.$refs[‘form’].resetFields()方法有效，必须配置el-form :model 属性和el-form-item中的prop属性，才可以。注意：this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据。 2、坑1 在还没有显示对话框之前就调用this.$refs[‘form

Vue.set解决Vant中输入框（Field）组件，动态渲染时获取不到输入值的问题

D_lunar的博客

12-02

3562

根据配置文件，自动生成Field组件时，由于Field组件是自动生成的，所以Field组件的v-model也是根据配置文件生成的，使用的是对象的键值。在输入框内输入值后，光标离开输入框，输入框立马变为空，然而监听却发现输入框的值其实已经是你输入的值了，只是输入框中不显示。解决办法：初始化v-model使用的对象时，使用Vue.set给对象赋值。 Vue.set(对象,对象的键, 对象的值); ...

ui表单 vue 重置element_(vue.js)element ui 表单重置 this.$refs[formName].resetFields()不执行...

weixin_34129429的博客

02-04

474

我在一个弹框里有一个form表单，用于增加页面内容。点击取消按钮本身form里的内容都清空才对。使用了this.$refs['addServiceForm'].resetFields()不起作用。console出来console.log(this.$refs['addServiceForm'].resetFields());居然是undefined。title="新建服务":visible.syn...

Vue开发时新增或编辑时resetFields失效

野生松

07-17

800

在实际开发时，碰到了先打开编辑弹窗进行赋值再关闭，再打开新增时resetFields失效，导致数据未被刷新。感觉挺常见的，记录一下：（elementui、antdvue 几个主流的框架都会出现这个问题） resetFields方法的原理：此方法用于将form表单的数据设置为初始值而这个初始值是在form mounted生命周期被赋值上去的所以，在 form mounted之前，如果给form表单赋值了，那么后面调用resetFields()都是无效的，因为form表单的初始值已经在 mou..

element-ui 表单清空 resetFields 方法清空表单中的坑

weixin_41991501的博客

08-23

3万+

resetFields() 清空表单时机

vue中的resetfields函数

weixin_43846410的博客

08-18

2372

:visible.sync控制el-dialog的显示，当我们退出弹窗时会销毁子组件的变量，实现子组件初始化，下次进入就不会携带上次输入的信息了。一般在新增和编辑的时候用的都是同一个对话框和form表单，而在先点击编辑的时候form表单的resetfileds函数就会失效解决原理：实际上结构是（通过vue类比） data里面有一个form表单的初始值， methods里面定义了一个resetfileds的函数 resetfileds函数的作用:记录在mounted生命周期执行之前最后一次for

vue使用dialog关闭前调用_vue使用el-dialog关闭后重置数据的最佳方法

weixin_36397447的博客

01-12

2177

此方法试用所有需要重置数据的场景el-dialog打开一次之后，再次打开之前的数据不会销毁，依然存在。我们需要在关闭后重新初始化数据。重置表单的方法this.$refs[formRef].resetFields();有些数据不是表单中的数据，也需要重置。难道一个个的重新手动赋值吗？当然可以，就是比较麻烦。好在vue帮我们保存了一份原始数据，直接把data复制为原始数据即可this.$data = ...

Vue + Element-ui 表单 resetFields 无法重置问题

优快云 for recording problems

04-14

1367

问题背景在开发中自己使用this.$refs[formName].resetFields()出现无法重置表单的的场景有两种： 1、<Modal/ >组件内表单填写，在 modal 组件未挂载在 DOM 元素中，就无法获取到 form 表单组件的实例，所以this.$refs[formName]获取实例就会出现 undefined 的情况。 2、比如编辑表格数据，需要回显表单数据，我们一般的做法就是放表单的 rawValue 赋值就搞定，但是我们从新添加数据之前想重置表单就无效。下面说说我遇到

Vue：输入框赋值后无法再编辑输入框的值

weixin_40841731的博客

12-10

5248

可从vue官方文档中找到一句话：根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新可以发现，引起这个问题的原因可能是你，在data中没有定义这个属性，导致赋值可以赋上，但是再次修改的时候，修改不了，也删除不了。因为数据是双向绑定的：vue底层在渲染dom,然后再展示数据，然后编辑的时候，vue底层，找不到这个属性，那肯定编辑不了了 ...

elementuibiao表单置空失效