Call a function when the Loading Bar is displayed / hidden



  • Hello, everyone,

    I’ve discovered Quasar for myself and I’m excited. Now I’m hoping you can help me solve a problem.

    I start an Axios call with a button click. The Loading Bar appears properly. But I’d like to disable the Send button until the Axios call is complete.

    Since I’m using a Mixin, I can’t write the Disable function directly into the Axios call. My idea is to respond to the appearance of the Loading Bar. Or do you have a better idea?

    Best regards
    Oxi

    <q-btn
        color="primary"
        icon="cloud"
        label="Load list"
         v-bind:loading="submitting"
         v-on:click="startAxiosCall"
    />
    

    Idea: The variable “submitting” should be set to true as long as the loading bar is displayed.

    The Docs say, there is already an event triggered:
    aa949249-738f-4d0c-ac13-e11febd9bf0c-image.png

    Unfortunately, I don’t know how to react to it or intercept it or anything like that.



  • I figured it out myself 🙂

    The Ajax-Bar had to be integrated and the event had to be written in it.

    https://quasar.dev/start/how-to-use-vue#Handling-Vue-Events
    https://quasar.dev/vue-components/ajax-bar#Usage