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

Question

我在一个弹框里有一个form表单，用于增加页面内容。点击取消按钮本身form里的内容都清空才对。使用了this.$refs['addServiceForm'].resetFields()不起作用。console出来console.log(this.$refs['addServiceForm'].resetFields());居然是undefined。名称简称类型备注确定取消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()
})