#javascript #api #vue.js #axios
#язык JavaScript #API #vue.js #аксиос
Вопрос:
У меня есть учетная запись пользователя, в которой пользователь может нажать кнопку редактирования и отредактировать свою пользовательскую информацию. Для этого я создал два контейнера с v-if. Поэтому, если значение редактирования равно true, я отображаю другой div, а затем, когда значение редактирования равно false.
Теперь у меня возникли проблемы с сохранением обновленной информации о пользователе и отправкой данных в мой api. Это раздел моего кода:
lt;div class="col-4"gt; lt;button @click="savePatient(user)" type="button" class="btn btn-success float-end" gt; lt;i class="fas fa-save"gt;lt;/igt; Speichern lt;/buttongt; lt;/divgt; lt;/divgt; lt;hr /gt; lt;div v-if="userdetails"gt; lt;div class="form-group row text-left"gt; lt;label class="col-md-4 col-form-label" gt;lt;stronggt;E-Mailadresse lt;/stronggt; lt;/labelgt; lt;div class="form-group"gt; lt;input type="email" class="form-control" id="email" v-model="userdetails.patient_email" /gt; lt;/divgt; lt;/divgt;
Здесь пользователь может увидеть свой фактический адрес электронной почты (userdetails.patient_email). И он может изменить его, а затем нажать кнопку «Сохранить». Но я не знаю, как я могу передать эту информацию своему patient.module.js файл и сделайте там put-вызов моего api.
Мой patient.module.js файл выглядит так:
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) ) } },
Ответ №1:
Чтобы позвонить axios
, вам нужно только действие
state: { user: { email: '', location: '', specialty: '', attribute: '', language: '', gender: '', } }, actions: { editPatient({state, commit}, patient) { axios.put(`http://URLv1/patients/${this.id}`, state.user) } }
И установите значение электронной почты, связанное с этим state.user.email
lt;button @click="editPatient" type="button" class="btn btn-success float-end" gt; lt;i class="fas fa-save"gt;lt;/igt; Speichern lt;/buttongt; ... lt;div class="form-group"gt; lt;input type="email" class="form-control" id="email" v-model="user.email" /gt; lt;/divgt; ... lt;scriptgt; export default { computed: { ...mapState({ user: (state) =gt; state.patient.user, }), }, methods: { ...mapActions("patient", ["editPatient"]), }, }; lt;/scriptgt;