表单重置的坑

this.$refs[‘form’].resetFields()方法是重置表单到初始值，而不是清空表单，当表单在第一次渲染时所有的数据就是初始数据，这时我才知道问题的根源，因为在弹窗弹出时，我立马给它赋值了一个初始值，形如：

openDialog() {
    this.dialogShow = true
    this.form.something = 'something'
}

这导致resetFields方法始终都会把这个值赋值到初始值，即我设置的那个值(‘somethig’)，而不是在data中定义的初始的’’。

 

解决方案
解决方法也是参考老哥的回答，在此附上老哥的原址，表单重置的坑，那么我也是参照如上的方法，即在下次dom更新循环结束后执行回调，以此来使’‘成为属性的初始值而不是’something’，即this.form.something先被初始化为’’，之后再被赋值’something’，形如

openDialog() {
    this.dialogShow = true
    this.$nextTick(() => {
        this.form.something = 'something'
    })
}

这下再使用this.$refs[‘form’].resetFields()方法，就会发现，something被重置为’’，问题解决。VUE的使用真的是要很关注加载顺序以及执行周期问题，不然会莫名入坑。这里的nextTick用法说明，官网是这么说的，在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM