NativeScript Vue导航问题

时间:2020-01-08 13:25:35

标签: typescript vue.js nativescript vue-component

我在Nativescript + vue中有一个简单的应用程序,可从一页导航到另一页。 这是我的login.vue

 <template>
    <FlexboxLayout class="login-page">

        <StackLayout class="login-form">
            <!-- <Image class="brand-icon" src="~/images/NativeScript-Vue.png" /> -->
            <Label class="login-title" text="Xnapp NativeScript" />

            <StackLayout class="form-group" marginBottom="15">
                <TextField class="input" hint="Email" keyboardType="email" autocorrect="false" autocapitalizationType="none" v-model="user.email"
                returnKeyType="next" fontSize="18" />
                <StackLayout class="hr-light" />
            </StackLayout>

            <StackLayout class="form-group" marginBottom="15">
                <TextField ref="password" class="input" hint="Password" secure="true" v-model="user.password" :returnKeyType="isLoggingIn ? 'done' : 'next'" fontSize="18" />
                <StackLayout class="hr-light" />
            </StackLayout>

            <StackLayout v-show="!isLoggingIn" class="form-group">
                <TextField ref="confirmPassword" class="input" hint="Confirm password" secure="true" v-model="user.confirmPassword" returnKeyType="done"
                fontSize="18" />
                <StackLayout class="hr-light" />
            </StackLayout>

            <Button :text="isLoggingIn ? 'Login' : 'Signup'" @tap="submitLogin" class="btn btn-primary m-t-20" />
            <Label v-show="isLoggingIn" text="Forgot your password?" class="login-label"/>
        </StackLayout>

        <Label class="login-label sign-up-label" @tap="toggleForm">
            <FormattedString>
            <Span :text="isLoggingIn ? 'Don’t have an account? ' : 'Back to Login'" />
            <Span :text="isLoggingIn ? 'Sign up' : ''" class="bold" />
            </FormattedString>
        </Label>

    </FlexboxLayout>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { getFile, getImage, getJSON, getString, request, HttpResponse } from "tns-core-modules/http";
import DashboardComponent from "@/components/dashboard.vue";
import chart from "./chart.vue";
@Component
export default class LoginComponent extends Vue {
    isLoggingIn = true;
    $navigateTo;
    user = {
        email: "test@gmail.comr",
        password: "123",
        confirmPassword: ""
    };

    toggleForm() {
        this.isLoggingIn = !this.isLoggingIn;
    }

    submitLogin() {
        if(this.isLoggingIn)
        this.login();
        else 
        this.registration();
    }

    login() {
        alert('login');
        this.$navigateTo(DashboardComponent);
        // this.$navigateTo(chart);
    }

    registration() {
        alert('registration');
    }

//   mounted() {   
//     getJSON("https://jsonplaceholder.typicode.com/posts/").then(result => {
//       this.listData = result;
//       console.log(this.listData);
//     }, error => {
//       console.log(error);
//     });
//   }

}
</script>

<style scoped>
    .login-page {
        align-items: center;
        flex-direction: column;
    }
    .login-form {
        margin-left: 20;
        margin-right: 20;
        flex-grow: 1;
        vertical-align: middle;
    }
    .brand-icon {
        margin-bottom: 12;
        height: 90;
        font-weight: bold;
    }
    .login-title {
        horizontal-align: center;
        font-size: 20;
        font-weight: 600;
        margin-bottom: 30;
        text-align: center;
    }
    .form-group .form-control {
        font-size: 36;
        placeholder-color: #A8A8A8;
    }
    .login-label {
        horizontal-align: center;
        color: #A8A8A8;
        font-size: 16;
    }
    .sign-up-label {
        margin-bottom: 20;
    }
</style>

和dashboard.vue

<template>
    <Page>
        <ActionBar class="page-title" title="Dashboard d"/>

    </Page>  
</template>

当我单击登录按钮时,点击警报被触发,但未导航到下一页并在日志中显示警告 getFrameById()已过时。改用Frame.getFrameById()。页面。

对此我有什么建议 谢谢 它显示警告

0 个答案:

没有答案