My objective is to develop an 'edit account' form where users can update their account details. I aim to display the account information in a pre-filled form that includes fields like username, email, and address.
Users will be able to make changes to the data in the form and submit it, updating their user information in the process.
To achieve this, I am utilizing v-model to connect the form inputs to an object named accountInfo within my data structure, which looks like this:
data() {
return {
accountInfo: {
firstName: ''
}
}
}
For instance, here's how a form input appears in the template:
<input v-model.trim="accountInfo.firstName" type="text" class="form-control" id="first-name" />
The current values for the keys in the object are empty strings. However, I intend to retrieve these values from an object called userProfile, which is a state property in vuex.
In my 'edit account' component, I'm mapping the vuex state by importing:
import { mapState } from "vuex";
Then using the following code snippet in a computed property:
computed: {
...mapState(["userProfile"])
}
The idea is to set the initial values of accountInfo using values from the userProfile computed property mapped from vuex. The implementation would look something like this:
data() {
return {
accountInfo: {
firstName: this.userProfile.fristName,
}
}
}
However, this approach does not work as expected, presumably because data rendering occurs earlier in the lifecycle than computed properties.
Below is the complete code:
EditAccount.vue
<template>
<div class="container-fluid">
<form id="sign_up_form" @submit.prevent>
<div class="form-row">
<div class="form-group col-md-6">
<input v-model.trim="signupForm.firstName" type="text" class="form-control" id="first_name" />
</div>
</div>
</form>
</div>
</template>
<script>
import { mapState } from "vuex";
import SideBar from "../common/SideBar.vue";
export default {
name: "EditAccount",
computed: {
...mapState(["userProfile"])
},
data() {
return {
accountInfo: {
firstName: this.userProfile.firstName
}
};
}
};
</script>
store.js:
export const store = new Vuex.Store({
state: {
userProfile: {firstName: "Oamar", lastName: "Kanji"}
}
});