Vue-element 种 resetFields()那些坑
2019-12-09 本文已影响0人
小鱼儿_逆流而上
哈喽，小鱼儿又回来啦，哈哈哈哈哈哈哈哈哈哈哈，最近正在进行项目的初步调试阶段，在此过程中呢就发现，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对象之后的操作有很大的优势，这里只是简单的例子，实际应用中更为好用~~~
