Vue js component loading

Question

I am using Vuejs 1.0 with laravel 5.2 as the technology stack for one of my application. I have got some large forms which involves some vue component based elements like datepickers and signature-pad and it could be present multiple times on the same form.

I am facing the issue where sometimes the all the components doesn't get rendered and when the submission of those half loaded forms, it causes other issues. So i am looking for an option by which i could enable the submit button only when all the components on the page has loaded and if there is any component which is having issues in loading i could instruct the user to reload via alert popup or something.

Answer 1

What about attaching a lifecycle hook mounted() on the component and trigger an event once component mounted.

In Template :

<component @hook:mounted="doSomething"></component>

In Script :

methods: {
    doSomething() {
        // assign a true value to a flag which will enable the submit button.
        this.isSubmitEnabled = true;
    }
}