You can try this:
- Initialize your form data properties with required fields. (As seen in STEP 1)
- Create another data field that will be used to clone the form data you want to reset (As seen in STEP 2).
- Clone the form data required (STEP 3)
- Write you reset method (STEP 4)
- Use any where you prefer (STEP 5)
export default {
// Initialize your data
data() {
return {
// Initialize the form field (STEP 1)
formFields: {
name: '',
email: '',
password: '',
moreData: {
field1: '',
field2: [],
},
},
// Create an object property used for cloning (STEP 2)
formFieldsCopy: {},
};
},
// When the DOM is mounted copy the
// formField you want to a temporary field
// You can use lodash ._clone or ES6 spread operator (STEP 3)
mounted() {
this.formFieldsCopy = { ...this.formFields };
},
methods: {
// Write the function to reset the form (STEP 4)
resetFormFields() {
this.formFields = { ...this.formFieldsCopy };
},
submit() {
// Do you normal Axios requests here
// and call you reset function. (STEP 5).
this.resetFormFields();
},
},
};
