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。

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

案例一

<template>
  <div class="hello">
    <h3 ref="yuer">我是一条小鱼儿</h3>
    <button @click="get"></button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  created(){
    console.log(1)
    console.log(this.$refs.yuer);

    this.$nextTick(()=>{
      console.log(2)
      console.log(this.$refs.yuer)
    })
  },
  mounted(){
    console.log(3)
    console.log(this.$refs.yuer)

    this.$nextTick(()=>{
      console.log(4)
      console.log(this.$refs.yuer)
    })
  },
  methods:{
    get(){}
  }
};
</script>

案例一.png

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

案例二

<template>
  <div class="hello">
    <h3 ref="yuer">{{value}}</h3>
    <button @click="get">点击</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      value:'我是一条小鱼儿'
    };
  },
  created(){},
  mounted(){},
  methods:{
    get(){
      this.value = '我是一条小青龙'
      console.log(this.$refs.yuer.innerText)

      this.$nextTick(()=>{
        console.log(this.$refs.yuer.innerText)
      })
    }
  }
};
</script>

案例二.png

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

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

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