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