vue：將更改的數據發送到 api (axios.put)

Question

我有一個用戶帳戶，用戶可以在其中按下編輯按鈕並編輯他的用戶信息。 為此，我使用 v-if 創建了兩個容器。 因此，如果編輯值為真，那么當編輯值為假時，我會渲染一個不同的 div。

現在我無法保存更新的用戶信息並將數據發送到我的 api。 這是我的代碼的一部分：

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

在這里，用戶可以看到他的實際電子郵件地址（userdetails.patient_email）。 他可以更改它，然后按下 savePatient-Button。 但我不知道如何將這些信息提供給我的 patient.module.js 文件並在那里對我的 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)
      )
    }
  },

Answer 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的 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>