Vue本机v模型在不同的vue之间不起作用

时间:2019-03-07 11:54:41

标签: react-native vue.js vue-native

im是vue native的新功能,并尝试制作一些组件。我做了一个textinput组件,想在代码中的其他地方重用它。

这里是一个示例,其中我重复使用我在登录屏幕上在textinputComponent.vue中制作的textinput组件。当我运行代码时,consol返回:

用户名:

密码:

我收到警报消息:错误的用户名或密码!

它将用户输入保存在this.username和this.password中。我该怎么做?

textinputComponent.vue

    <template>
    <text-input
        v-bind:placeholder= "placeholderName"
        auto-capitalize="none" 
        :style="{height: 40, width: 250, borderColor: 'gray', borderWidth: 1}"

    />

</template>

 <script>
    export default {
      props: {
        placeholderName: {
            Type: Object
        }
      }
    }
</script>

loginScreen.vue

<template>
    <view class="container">

        <text-b placeholderName="Username" v-model="this.username"/>
        <text-b placeholderName="Password" v-model="this.password"/>

        <button class="button-container"
            :on-press="login"
            title="Login"
            accessibility-label="Button taking you to the next screen"
        />  
    </view>
</template>


<script>
import { Alert } from 'react-native';
import textB from "../../components/singleComponents/textinputComponent.vue";

export default {
    props: {
        navigation: {
            type: Object
        }
     },

    components: { 
        textB
    },


    methods: {
        login: function() {

            console.log("username: " + this.username)
            console.log("Password: " + this.password)

            if(this.username == '1' && this.password == '1'){
                this.navigation.navigate("AppTab");
            }else{

                Alert.alert(
                    'Wrong username or password!',
                    'Try again',
                    [
                        {text: 'OK', onPress: () => console.log('OK Pressed')},
                        {
                            text: 'Cancel',
                            onPress: () => console.log('Cancel Pressed'),
                            style: 'cancel',
                        },
                    ],
                    {cancelable: false},
                );
            }
        }
    },

    data: function() {
        return {
            username: '',
            password: '',
        };
    } 
}
</script>

0 个答案:

没有答案