(vue.js)element ui 表单重置 this.$refs[formName].resetFields()不执行

Question

我在一个弹框里有一个form表单，用于增加页面内容。点击取消按钮本身form里的内容都清空才对。使用了this.$refs['addServiceForm'].resetFields()不起作用。console出来console.log(this.$refs['addServiceForm'].resetFields());居然是undefined。
title="新建服务"
:visible.sync="addServiceDialogVisible"
width="400px">
名称
简称
类型
v-for="iteminserviceTypeOptions1"
:key="item.value"
:label="item.label"
:value="item.value">
备注
确定
取消
cancleAddService(){
this.resetForm('addServiceForm');
//this.serviceName='';
//this.serviceShorterName='';
//this.serviceRemarks='';
//this.serviceType='';
this.addServiceDialogVisible=false;
},
resetForm(formName){
this.$refs[formName].resetFields();
console.log("form名称:"+this.$refs['addServiceForm'].resetFields());
}

Answer 1

el-form需要接收一个model，并且需要配合el-form-item一起使用，并且在el-form-item上绑定prop属性，resetField方法才能好使。并且addServiceData应该是个对象，定义在data里面，类似这样data(){return{addServiceData:{mobile:''}}}

Answer 2

外部重置这样用this.$nextTick(()=>{this.$refs['ruleForm'].resetFields()})