Tengo una cuenta de usuario donde el usuario puede presionar el botón de edición y editar su información de usuario. Para ello he creado dos contenedores con v-if. Entonces, si el valor de edición es verdadero, renderizo un div diferente cuando el valor de edición es falso.
Ahora tengo problemas para guardar la información de usuario actualizada y enviar los datos a mi api. Esta es una sección de mi código:
<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>Aquí el usuario puede ver su dirección de correo electrónico real (detalles de usuario.correo_paciente). Y puede cambiarlo y presionar después el botón guardarPaciente. Pero no sé cómo puedo proporcionar esta información a mi archivopatient.module.js y hacer una llamada a mi API.
Mi archivopatient.module.js se ve así:
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) ) } },Para llamar a un axios solo necesitas una acción
state: { user: { email: '', location: '', specialty: '', attribute: '', language: '', gender: '', } }, actions: { editPatient({state, commit}, patient) { axios.put(`http://URLv1/patients/${this.id}`, state.user) } } Y establezca el valor de correo electrónico vinculado a este 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>