greyby / vue-spinner

vue spinners
MIT License
1.8k stars 176 forks source link

Usage inside vue-resource interceptor #6

Open franc014 opened 7 years ago

franc014 commented 7 years ago

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!

patrickbolle commented 7 years ago

Did you get this figured out?

franc014 commented 7 years ago

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

victorwpbastos commented 7 years ago

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

catalsdevelop commented 7 years ago

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