title: Loading spinner when making Axios request
body: <p>I have a simple button in a form and I would like to show a spinner when I make Axios request. Here's my button with spinner (from loading.io).</p>
  
  <pre><code>&lt;form @submit.prevent="onSubmit" class="form-inline"&gt;
    ...
    &lt;button type="submit" class="btn btn-primary mb-5" id="loading" :disabled="loading"&gt;
      &lt;div class="lds-ring" v-if="loading"&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
      Submit
    &lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>There is a spinner which I show conditionally when <code>loading</code> is <code>true</code>.</p>
  
  <p>I have defined <code>onSubmit</code> method but where I dispatch an action and change <code>loading</code> to <code>true</code> before the request and to <code>false</code> when the request is complete but it doesn't work. Could you explain me why?</p>
  
  <h3>onSubmit()</h3>
  
  <pre><code>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
        }
  </code></pre>
  
  <h3>create_ride</h3>
  
  <pre><code>createRide({ commit }, ride){
      axios.post('/api/trips', ride)
        .then(response =&gt; {
          commit('addRide', response.data)
        })
        .then(response =&gt; {
          commit('showSuccessAlert')
        })
        .catch(error =&gt; {
          commit('showErrorAlert')
        })
  </code></pre>