Managing user account information is a key feature of my application. Users have the ability to edit their details by simply clicking on the edit button, which triggers two different containers to display depending on whether the edit mode is activated or not.
However, I am encountering issues when trying to save and update the user information through the API. The following snippet illustrates part of the code:
<div class="col-4">
<button
@click="savePatient(user)"
type="button"
class="btn btn-success float-end"
>
<i class="fas fa-save"></i>
Save
</button>
</div>
<hr />
<div v-if="userdetails">
<div class="form-group row text-left">
<label class="col-md-4 col-form-label">
<strong>Email Address: </strong>
</label>
<div class="form-group">
<input
type="email"
class="form-control"
id="email"
v-model="userdetails.patient_email"
/>
</div>
</div>
In this section, users can view and modify their email address (userdetails.patient_email) before saving the changes by clicking the 'Save' button. However, I am uncertain about how to pass this updated information to my patient.module.js file in order to perform a PUT request to the API endpoint.
My patient.module.js file includes the following logic:
actions: {
edit({ commit }, patient) {
commit("editPatient", patient);
},
...
mutations: {
editPatient(state) {
return axios.put(
`http://URLv1/patients/${this.id}`,
{
patient_email: user.email,
patient_location: user.location,
patient_specialties: user.specialty,
patient_attributes: user.attribute,
patient_languages: user.language,
patient_preferred_gender: user.gender
}
)
}
},