Загрузка блесны при оформлении запроса Axios

Question

У меня есть простая кнопка в форме, и я хотел бы показать счетчик, когда я делаю запрос Axios.Вот моя кнопка со спиннером (из loading.io).

<form @submit.prevent="onSubmit" class="form-inline">
  ...
  <button type="submit" class="btn btn-primary mb-5" id="loading" :disabled="loading">
    <div class="lds-ring" v-if="loading"><div></div><div></div><div></div><div></div></div>
    Submit
  </button>
</form>

Есть спиннер, который я показываю условно, когда loading равен true.

Я определил onSubmitметод, но где я отправляю действие и меняю loading на true до запроса и на false, когда запрос завершен, но он не работает.Не могли бы вы объяснить, почему?

onSubmit ()

onSubmit () {
        const formData = {
          start_address: this.start_address,
          destination_address: this.destination_address,
          price_cents: this.price_cents,
          date: this.date
        }
        this.loading = true
        this.$store.dispatch('createRide', formData)
        this.loading = false
      }

create_ride

createRide({ commit }, ride){
    axios.post('/api/trips', ride)
      .then(response => {
        commit('addRide', response.data)
      })
      .then(response => {
        commit('showSuccessAlert')
      })
      .catch(error => {
        commit('showErrorAlert')
      })

Answer 1

Вам нужно дождаться разрешения обещания при отправке вызова API, так как вы написали, что свойство загрузки сразу же устанавливается в false.Попробуйте изменить метод на:

async onSubmit () {
    const formData = {
      start_address: this.start_address,
      destination_address: this.destination_address,
      price_cents: this.price_cents,
      date: this.date
    }
    this.loading = true

    // using await
    await this.$store.dispatch('createRide', formData)
    this.loading = false

    // or without await
    this.$store.dispatch('createRide', formData).then(() => {
      this.loading = false
    })
  }

Также должно быть обновлено действие хранилища vuex:

async createRide({ commit }, ride){
  await axios.post('/api/trips', ride)
    .then(response => {
      commit('addRide', response.data)
    })
    .then(response => {
      commit('showSuccessAlert')
    })
    .catch(error => {
      commit('showErrorAlert')
    })
})