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>