遇到的现象:在业务处理中,发现先打开编辑弹框,关闭后在打开创建弹框(创建、编辑为同一个组件),弹框内会有上次打开的数据,但是在每次关闭弹框的时候重置了表单的啊!
原因:form表单的重置是以页面初始值作为重置标准,如果先打开的是编辑,那么重置是以弹框打开时的数据作为标准,即表单的数据为编辑时的数据
解决思路:
1. 每次打开弹框时,将表单数据重置为初始化值(因为创建、编辑为同一个组件,实际业务中会多次打开,只在data中声明二次打开时不会触发)
methods: {
openDialog() {
this.formData = {
name: '',
type: [],
vaild: true
}
this.dialogVisible = true
}
},
2. 用 nextTick 处理一下form的数据
methods: {
initFormData() {
axios.get('/user?ID=12345').then(function (response) {
let that = this
// this.$nextTick()函数作用是等页面的数据更新完成以后,它再执行内部回调函数中的逻辑
this.$nextTick(() => {
that.formData = response
})
}).catch(function (error) {
console.log(error)
})
}
},