vue 中element-ui的表单重置
问题来源:
点击按钮 打开 dialog时需要重置嵌入的表单,
<el-dialog
title="课程信息修改"
:visible="courseconfirm"
:modal-append-to-body="false"
:close-on-click-modal="false"
@open="resetForm('course')" //在此使用用open回调,触发重置方法
@close="courseconfirm=false"
width="50%"
>
1 resetForm(formName) {
2 this.$refs[formName].resetFields();
3 },
此时,由于Form 表单嵌入在dialog里还没加载完,调用resetForm() 方法时报错:Cannot read property 'resetFields' of undefined"
解决方案:
1 resetForm(formName) {
2 this.$nextTick(() => {
3 this.$refs[formName].resetFields();
4 });
5 }
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新