CODEWITHSUNDEEP
javascriptvue.jsvuejs2axiosvue-component
Alex
Alex

Reputation: 375

Ability to load component while axios

Is it possible to do the following: There is a spinner component.

axios:

    method() {
     SPINNER (component) -- on
     axios.get('/shop', {
       params: {
         something
        }
      }) .then ((resp) => {
        SPINNER (component) -- off
      })
    }

Upvotes: 1

Views: 278

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23490

You can use v-if:

Vue.component('spinner', {
  template: `
    <div class="">
      loading...
    </div>
  `
})

new Vue({
  el: '#demo',
  data() {
    return {
      loading: true
    }
  },
  methods: {
    loadData() {
    // this would be your axios call
      setTimeout(() => {
        console.log('finished loading!');
        // on success just change data property
        this.loading = false
      }, 2000);
    }
  },
  mounted() {
    this.loadData()
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-if="!loading">loaded</div>
  <spinner v-if="loading" />
</div>

Upvotes: 1

Related Questions