Vue-element 种 resetFields()那些坑

哈喽,小鱼儿又回来啦,哈哈哈哈哈哈哈哈哈哈哈,最近正在进行项目的初步调试阶段,在此过程中呢就发现,this.$refs['ruleForm'].resetFields()经常会报错!

具体描述

我的form在两个 dialog 中,分别是添加、修改,界面上都有两个按钮,添加/修改、取消,如下图所示:


打开添加窗体报错显示.png
添加、修改按钮显示.png
界面加载之后,点击添加,再点修改是没问题的,就是**先点修改,会把要修改的数据加载到弹出的窗体
上,但是这个界面的值竟然被记住了!再点击添加窗体时,this.$refs['ruleForm'].resetFields() 
的执行结果,竟然是刚才的修改窗体上的内容!!!**不管怎么修改,以后this.$refs['ruleForm'].
resetFields();的执行结果还是一样的!!!

话不多说,上解决方法:

// 添加企业联系人
    creat() {
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.editingContact = {}
        this.$refs.ruleForm.resetFields()
      })
    },
// 修改企业联系人
    editContact(role) {
      this.editingContact = role
      this.dialogFormVisible = true
      this.editTitle = '修改企业联系人'
    },

原谅我是一个小菜鸟,我还得总结下这个 this.$nextTick() 是怎么回事儿嘞, 下面我们来看看究竟是怎么使用的:

以下借鉴于此篇:https://www.cnblogs.com/jin-zhe/p/9985436.html
this.$nextTick是在下次DOM更新循环之后执行的延迟回调,在修改数据之后,立即使用这个回调函数,获取更新后的DOM。

话不多说,我们直接来看例子吧~

案例一



案例一.png

我们可以根据打印的顺序看到,在created()钩子函数执行的时候DOM其实并未进行任何渲染,而此时进行DOM操作并无作用,而在created()里使用this.$nextTick()可以等待DOM生成以后再来获取DOM对象!!!

案例二




案例二.png

根据上面的案例二可以看出,在方法里直接打印的话,由于DOM元素还没有更新,因此打印出来的还是未改变之前的值,而通过this.$nextTick()获取到的值为DOM更新之后的值

this.$nextTick()在页面交互,尤其是从后台获取数据后重新生成DOM对象之后的操作有很大的优势,这里只是简单的例子,实际应用中更为好用~~~

好了,今天就跟大家分享这么多吧,有什么问题或是不懂的可以随时留言哦,我都会及时回复的哈!!!

你可能感兴趣的:(Vue-element 种 resetFields()那些坑)