Vue.js disable component during ajax request

Question

I\'m looking for a simple solution for the following problem:

I have a Vue component button with which I can make an ajax request. I would like to disable this butto

Answer 1

Sounds like you want your action to set (commit) a flag when it starts and then clear it when it ends.

Try something like this in Vuex...

state: {
  loading: false
},
mutations: {
  isLoading (state) {
    state.loading = true
  },
  doneLoading (state) {
    state.loading = false
  }
},
actions: {
  doAjaxRequest ({ commit }) {
    commit('isLoading')
    return doSomeAjaxRequest().then(res => {
      // success
    }).catch(err => {
      // oh noes
    }).finally(() => {
      commit('doneLoading')
    })
  }
}

Now in your component, you can map the loading state and use it to disable your button, eg

---

Alternatively, you can maintain the progress of the request within your component if your action returns a promise (as above). For example, say your button has

Do the thing!

and

data () {
  return { loading: false }
},
methods: {
  doTheThing() {
    this.loading = true
    this.$store.dispatch('someAjaxActionThatReturnsAPromise').finally(() => {
      this.loading = false
    })
  }
}