export default {
data() {
return {
usrName: null,
pass1: null,
pass2: null,
regState: {stateCode:-1},
}
},
methods: {
register: function () {
this.axios.post("/login/", { baseURL: 'http://127.0.0.1:3000', usrName: this.usrName, passWord: this.pass1 }).then((response)=>{
console.log(response.data)
this.$store.state.sysDecision.usrDecision = 2
})
}
}
}
}
</script>
<template>
<XAIHeader :registerActive="true"></XAIHeader>
<div class="container">
<form class="w-50 mx-auto pt-5" style="padding-bottom: 400px;">
<h5 class="mb-3">register</h5>
<div>
<label class="form-label">user name</label>
<input v-model="usrName" type="text" class="form-control" required>
</div>
<div>
<label class="form-label">pass word </label>
<input v-model="pass1" type="current-password" class="form-control" required>
</div>
<div>
<label class="form-label">repeat pass word</label>
<input v-model="pass2" type="new-password" class="form-control" required>
</div>
<div class="mt-3">
<button @click="register" class="btn btn-primary" type="submit">register</button>
</div>
</form>
{{ this.$store.state.sysDecision.usrDecision}}
</div>
</template>
I have encountered an issue where the form data gets reset to initial values after successfully submitting a post request using axios in Vue.js. Even the data stored in vuex also resets to default values. How can I prevent this from happening and retain the previous form data after it has been submitted?