vue: отправка измененных данных в api (axios.put)

#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;