vue-spinner icon indicating copy to clipboard operation
vue-spinner copied to clipboard

Usage inside vue-resource interceptor

Open franc014 opened this issue 9 years ago • 4 comments

Hi, I'm using vue-resource and I'd like to use vue-spinner inside interceptors to show/hide the spinner on any ajax request. I don't know if it's possible to reference a vue-spinner component inside the interceptor. I have done the following but with no success: (I'm using vueify)

var PulseLoader = require('vue-spinner/dist/vue-spinner.min').PulseLoader;

Vue.http.interceptors.push((request, next) => {
    this.loading = true;
   next((response) => {
        this.loading = false;
    });
});

new Vue({
    el: '#grid-manager',
   components: { 'pulse-loader': PulseLoader},

  ....and in the root vue instance i have:

<pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>

Thanks!

franc014 avatar Sep 15 '16 19:09 franc014

Did you get this figured out?

patrickbolle avatar Nov 27 '16 18:11 patrickbolle

Not yet @patrickbolle I think i'm going to use other options like this one http://ricostacruz.com/nprogress/

franc014 avatar Dec 02 '16 01:12 franc014

I guess this in the interceptor is in context of interceptor, not the vue main instance.

victorwpbastos avatar Mar 27 '17 16:03 victorwpbastos

a good solution is to use a global mixin like

Vue.mixin({
	data() {
		return {
			loading: false
		}
	}
})

then loading is a reactive property and can be used in interceptors

catalsdevelop avatar Jul 11 '17 04:07 catalsdevelop