Looking at the code snippet from my app component below:
<template>
<div>
<h3>Basic</h3>
<div v-for="(field, index) in basics" :key="index">
<input v-model="basics.name" placeholder="Name" type="text">
<br>
<br>
<input v-model="basics.email" placeholder="Email" type="email">
<br>
<hr/>
<button @click.prevent="addField">Add</button>
<button @click.prevent="removeField(index)">Remove</button>
<br>
<button @click.prevent="back">Back</button>
<button @click.prevent="toNext">Next</button>
</div>
</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
name: "Basics",
data() {
return {
basics: [{
name: "",
email: ""
}]
};
},
methods: {
...mapActions(["addBasicData"]),
addField(){
this.basics.push({
name: "",
email: ""
});
},
removeField(index){
this.basics.splice(index, 1);
},
toNext() {
this.addBasicData(this.basics);
this.$router.push({ name: "Location" });
},
back() {
this.$router.back();
}
}
};
</script>After submitting the form and clicking the next button, the data is stored in the state and we are redirected to the "Location" route.
However, upon clicking the back button in the "Location" route, we return to the "Basic" route with empty form fields, even though they are bound to the data object.
How can I retain the input field values when returning to the same route?
You can view a working replica of the app here: codesandbox