Vue Native v-модель не работает между разными значениями - PullRequest
Новая
       32

Vue Native v-модель не работает между разными значениями

0 голосов
/ 07 марта 2019

я новичок в vue native и пытаюсь сделать некоторые компоненты.Я создал компонент textinput и хочу использовать его в разных местах моего кода.

Вот пример, где я повторно использую компонент textinput, который я создал в textinputComponent.vue на экране входа в систему.Когда я запускаю код, консоль возвращает:

имя пользователя:

пароль:

и я получаю сообщение msg: неверное имя пользователя или пароль!

это не сохранитьпользовательский ввод в 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>
...