Syncing Larvel Debugbar to Vue's UI

user_12369920 0
Viewed 146

We are making an axios call that pulls in a gigantic object which is used to render a very lengthy UI using Bootstrap Vue.

The issue is that the UI continues to be rendered well after the axios call has been received.

Is there a way to check if everything is done rendering in Vue? The mounted hook does not work here.

More context:

The Laravel Debugbar gives me the best feedback here. When #6 AJAX is done, I know that the UI is done rendering. But how I can sync Laraven's debugbar with Vue's hooks?

[1]: https://i.stack.imgur.com/ijRgv.gif

axios vuejs2 laravel vue.js javascript
2 Answers

Maybe to try with this.$nextTick inside updated hook

user_119891890

There is another lifecycle hook in vue beside mounted

The updated lifecycle hook is fired everytime a component reactive property changes and the virtual dom is updated.

To react to virtual dom changes inside the updated hook you can use nextTick()

user_122816630
Related