在应用elementUI时遇到的谬误,在网上找了很久,解决办法都没用,官网文档也不够具体。
场景
在对话框敞开或者勾销时要重置表单,而Vue编译不通过,网上说是因为form表单未渲染进DOM,导致找不到此表单对象,导致:"TypeError: Cannot read property 'resetFields' of undefined"
网友提供的解决办法:
如果是第一次非空验证一下:
if (this.$refs['dictForm'] !== undefined) { this.clearForm();//封装了清空操作 }
或者利用Vue的自带个性(DOM渲染后执行):
this.$nextTick(()=>{ this.$refs.addForm.resetFields(); })
本次解决
试过上述计划后还是没用,那么大概率是代码设计有问题了。
官网提供了一个close的函数(摘自官网):
before-close
仅当用户通过点击敞开图标或遮罩敞开 Dialog 时起效。如果你在footer
具名 slot 里增加了用于敞开 Dialog 的按钮,那么能够在按钮的点击回调函数里退出before-close
的相干逻辑。
因为我了解谬误,将close
函数与before-close
属性混用,导致Vue编译不通过,下边间接贴上代码:
Vue代码:
<el-dialog :title="title" :close-on-click-modal="false"//避免正点退出 :visible.sync="centerDialogVisible"//管制是否显示 @close="clearForm"//对话框右上角自带的敞开按钮事件 width="30%" center >
Js代码:
clearForm(){ //暗藏对话框 this.centerDialogVisible = false; //表单验证还原 if (this.$refs['bookForm'] !== undefined) { this.$refs['bookForm'].resetFields(); }else{ this.$nextTick(()=>{ this.$refs['bookForm'].resetFields(); }); } //还原可编辑 this.flag = false; }