I have a user account where the user can press the edit-button and edit his user information. For this I have created two containers with v-if. So if the edit-value is true I render a different div then when the edit-value is false.
Now I have problems saving the updated user information and send the data to my api. This is a section of my code:
<div class="col-4">
<button
@click="savePatient(user)"
type="button"
class="btn btn-success float-end"
>
<i class="fas fa-save"></i>
Speichern
</button>
</div>
</div>
<hr />
<div v-if="userdetails">
<div class="form-group row text-left">
<label class="col-md-4 col-form-label"
><strong>E-Mailadresse </strong>
</label>
<div class="form-group">
<input
type="email"
class="form-control"
id="email"
v-model="userdetails.patient_email"
/>
</div>
</div>
Here the user can see his actual emailadress (userdetails.patient_email). And he can change it and press afterwards the savePatient-Button. But I don't know how I can give this information to my patient.module.js file and make there a put-call to my api.
My patient.module.js file looks like that:
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)
)
}
},
To call a axios you only need an action
state: {
user: {
email: '',
location: '',
specialty: '',
attribute: '',
language: '',
gender: '',
}
},
actions: {
editPatient({state, commit}, patient) {
axios.put(`http://URLv1/patients/${this.id}`, state.user)
}
}
And set the email value linked to this state.user.email
<button
@click="editPatient"
type="button"
class="btn btn-success float-end"
>
<i class="fas fa-save"></i>
Speichern
</button>
...
<div class="form-group">
<input
type="email"
class="form-control"
id="email"
v-model="user.email"
/>
</div>
...
<script>
export default {
computed: {
...mapState({
user: (state) => state.patient.user,
}),
},
methods: {
...mapActions("patient", ["editPatient"]),
},
};
</script>