In actual development, after entering content in the form form with a pop-up window, the form form should be cleared after the new addition is successful. Otherwise, when you enter the new pop-up window next time, there will be the content that was newly added last time.
Method 1: If there are fewer form items, you can choose to delete them manually:
= {
name:'',
username:'',
password:'',
confirm: '',
department: '',
phone: ''
}
Method 2: Of course the above method is also possible, but if the form form has many items, you need to write a lot of clear code;
Form provided in elementuiresetFieldsMethod, used to clear all form data, provided that the form item is to be usedpropProperties, bind to inputv-modelThe bound fields can be cleared:
this.$nextTick(() => {
if(this.$){
//this.$();
this.$();//Personal favorite. Sometimes clearValidate cannot be cleared, but the specific reason has not been found yet }
})
All usedpropThe form items of the attribute will be cleared
The code for the registration function method is as follows:
register(){
if ( !== ) {
this.$message({
type: "error",
message: 'The password input is inconsistent twice! '
})
return
}
this.$refs['loginForm'].validate((valid) => {
if (valid) {
("/user/register", ).then(res => {
if ( === 200) {
this.$message({
type: "success",
message: "Registered successfully"
})
// = {
// name:'',
// username:'',
// password:'',
// confirm: '',
// department: '',
// phone: ''
// }
this.$nextTick(() => {
if(this.$){
//this.$();
this.$();//Personal favorite. Sometimes clearValidate cannot be cleared, but the specific reason has not been found yet }
})
= false//Close the registration pop-up window after successful registration. Remember to use this. method, otherwise it will not be closed. // (formName)
// this.$refs[].resetFields()
// this.$("/modify")
} else {
this.$message({
type: "error",
message:
})
}
})
}
})
},
Supplement: element ui clear form data
1. Example component code ``
<el-form ref="searchForm" :inline="true" :model="form" label-width="80px">
<!--propAdd properties toform-itemsuperior,Need to be consistent with the last name of the bound data-->
<el-form-item label="name:" prop="name">
<el-input v-model="" placeholder="Please enter content"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Sure</el-button>
<el-button @click="resetForm('searchForm')">Reset</el-button>
</el-form-item>
</el-form>2. Add ref attribute to form: ref="searchForm"
<el-form ref="searchForm" :inline="true" :model="form" label-width="80px">
3. Add prop attributes to each item of form, otherwise it cannot be cleared. It is also explained in the official elementUI document.
<el-form-item label="name:" prop="name"> <el-input v-model="" placeholder="Please enter content"></el-input> </el-form-item>
4. Pass "searchForm" in the binding click event
<el-form-item>
<el-button @click="resetForm('searchForm')">Reset</el-button>
</el-form-item>5. Registration Event
resetForm(searchForm) {
this.$refs[searchForm].resetFields()//Reset form data}This is the article about automatically clearing the value of the form after the submission form is successfully returned. For more related contents of the content of the automatic clearing form of elementui, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!