Myujth

[edit] -> Playground Link

I am using NativeScript and Vue to create an app. Once it loads, I want to show a login page, or navigate somewhere else if the user has previously logged in.
My page loads but doesn't navigate to the login page. This is being run in an IOS emulator.

<template>
 <Page>
 <RadSideDrawer ref="drawer" showOverNavigation="true">
 <StackLayout ~drawerContent backgroundColor="#ffffff">
 <Label class="drawer-header" text="Drawer"/>

 <Label class="drawer-item" text="Static 1"/>
 <Label class="drawer-item" text="Static 2"/>
 <Label class="drawer-item" text="Static 3"/>
 </StackLayout>
 <Frame ~mainContent> 
 <Page> <!-- test to see if mainContent navigates -->
 <TextField class="input" hint="Email" keyboardType="email" autocorrect="false" autocapitalizationType="none" v-model="user.email"
 returnKeyType="next" fontSize="18" />
 </Page>
 </Frame>
 </RadSideDrawer>
 </Page>
</template>

<script>
import homePage from './HomePage'
import loginPage from './LoginPage'

export default 
 data() 
 return 
 isLoggingIn: true,
 user: 
 email: "foo@foo.com",
 password: "foo",
 confirmPassword: "foo"
 
 ;
 ,
 mounted() 
 this.user.email = "test@example.com", <!-- Change email to check mounted is called. It is! -->
 this.$navigateTo(loginPage, frame: "mainContent" )
 
;
</script>

I cannot work out what I am doing wrong and cannot work out from the source either. Any help/suggestions would be greatly appreciated.

You haven't set an id to your Frame inside RadSideDrawer.

In order for your this.$navigateTo code to work, the frame declaration suppose to be

...
<Frame id="mainContent" ~mainContent> 
...

Edit:

I have updated your Playground sample.

• 
  Page can only be the child of Frame. So I had to update your LoginPage.vue or HomePage.vue to hold a Page.


• If I'm not wrong RadSideDrawer internally overwrites the ref for mainContent (not sure though), so id works better here.


• When the component is mounted, it doesn't mean all components inside are mounted too. So I had to add a timeout. I'm not sure why you really want to navigate as soon page is loaded, instead you can embed login / home page component within Frame as default page.