3

[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.

Pieter
  • 2,188
  • 20
  • 27

1 Answers1

4

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.
Manoj
  • 21,753
  • 3
  • 20
  • 41
  • It doesn't make any difference for me. The documentation states it could be Id or Ref although the code indicates Id is used. Neither works for me. – Pieter Nov 15 '18 at 21:29
  • 1
    I'm not a Vue expert but as far as I know, using `~` is not equivalent to id or ref I guess. If neither ref or id works, I would suggest you to prepare a Playground sample so it could be easier to debug. – Manoj Nov 15 '18 at 21:37
  • Thank you. I have added a playground link (never thought of it). I have read somewhere that ~ is short for ref but cannot find it. Maybe I was wrong. Ref and Id doesn't work for me. – Pieter Nov 15 '18 at 22:34
  • Thank you! It makes more sense to me now. The idea with the immediate navigation is that a home page is loaded, but navigated to login if the user's token expired (or not logged in for another reason). The defaultPage property made the app crash. – Pieter Nov 16 '18 at 10:33