Nativescript-vue: Can't navigate/open modal/dialog on the 'mounted' hook

[I-NOZex]

Version

2.4.0

Reproduction link

https://play.nativescript.org/?template=play-vue&id=iep8E5&v=3

Platform and OS info

Android 7.1 / TNS Android 6.0.0 / Windows 10

Steps to reproduce

Preview the app on the phone, try each one of the 3 buttons and wait for the 'mounted' hook to be triggered

What is expected?

See a dialog OR see a modal OR navigate to the requested view

What is actually happening?

the modal / new view is being mounted but not rendered

---

I can't replicate it on the playground (nor run locally), but in the project I'm working on, the issue is still happening.

In the playground the only issue that is still present is the one with the modal (first, blue button).

I also found a workaround, using a timeout seems to make it work, but only if the timeout value is 1 second or near to:

            setTimeout(() => {
                    this.$showModal(MyModalView);
            }, 1000);

[I-NOZex]

More info about the 2 issues I can't reproduce, in my project I try to show a dialog in my main view component:

    export default {
        mounted() {
            this.foo();
        },

        methods: {
             foo(){
                 if(!this.$store.getters["auth/isAuthenticated"]){
                    console.log("I'm here");
                    alert("Some dialog message").then(() => {
                         console.log("Alert dialog closed.");
                     });
                 }
            }
        }
    };

The console.log I'm here is printed, but it doesn't show the dialog (but since I've the Webpack HMR enable, if I make a file change and the file is reload, the dialog is shown)

---

If I try to perform a navigation, in the same component as above, I use this code

    export default {
        mounted() {
            this.foo();
        },

        methods: {
             foo(){
                 if(!this.$store.getters["auth/isAuthenticated"]){
                    console.log("I'm here");
                    this.$navigateTo(SomeOtherView);
                 }
            }
        }
    };

Again, the console.log I'm here is printed, but it doesn't perform the navigation, and just as the modal issue, I can see that the view I'm trying to show is being mounted...

[tralves]

Try this: instead of using mounted() use the @loaded event on the page, (or another component).

E.g:

<page @loaded="loaded">

methods: {
  loaded() {
     // the stuff you were doing in mounted
  }
}

Why? mounted() runs as soon as Vue does its thing rendering the "DOM", but after that NS has to actually instantiate the native components. You can't call native functions until the native part is ready.

[I-NOZex]

That did the trick, this is probably the way to do it, thank you!

[msaelices]

@tralves @I-NOZex I think we should document this. I will do it.