jQuery plugin works inside mounted but not inside methods

I'm trying to use this jQuery plugin called waitMe (https://github.com/vadimsva/waitMe) which essentially just provides a nice loading screen.

I am trying to call it from inside one of my methods like so:

methods: {
    fetchStats: function()
    {
        jQuery('#queryOptions').waitMe({
            effect : 'rotation',
            text : '',
            bg : 'rgba(255,255,255,0.7)',
            color : '#f44336',
            maxSize : '',
            textPos : 'vertical',
            fontSize : '',
            source : ''
        });
    }
}

However doing this does not produce any result, and I do not get any errors in the console.

If I place this exact code inside the mounted function it works perfectly - however I don't want to call it when I am mounting this, I only want to trigger it when the fetchStats() method is run.

How can I run this from inside my methods in Vue?

jryd

9 years ago

Best Answer

Level 12

After hours of trying to figure this out, I realised that it was because I had some code below it executing an ajax request, and then below that I was hiding the effect.

To solve it, I just put the closing of waitMe inside the success function of my ajax call and it worked perfectly.

Please or to participate in this conversation.