Good morning.
I have a problem as I am trying to pass 3 data by a prop from “Login.vue” to “MyData.vue”, but whenever I send the data it always shows me undefined, I know that they are sent because the data changes from the ones I have at the beginning.
Login.vue
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<img src="../../public/assets/images/logo-vertical.svg" class="centerLogo" />
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<div id="container">
<ion-label>App</ion-label>
<ion-item>
<ion-label>Usuario</ion-label>
<ion-input type="email" placeholder="Email" v-model="emailInput"></ion-input>
</ion-item>
<ion-item>
<ion-label>Contraseña</ion-label>
<ion-input type="password" placeholder="Contraseña" v-model="passwordInput"></ion-input>
</ion-item>
<ion-button @click="loginConnection">Iniciar</ion-button>
<MyData hidden="hidden" :emailLogin="emailLogin" :passwordLogin="passwordLogin" :roleLogin="roleLogin"></MyData>
</div>
</ion-content>
</ion-page>
</template>
<script>
import { IonContent, IonHeader, IonPage, IonInput, IonButton, IonToolbar, IonItem, IonLabel, alertController } from '@ionic/vue';
import { defineComponent } from 'vue';
import router from '../router'
import MyData from '../views/MyData.vue'
export default defineComponent({
name: 'Login',
components: {
IonContent,
IonHeader,
IonPage,
IonButton,
IonInput,
IonItem,
IonLabel,
IonToolbar,
MyData
},
props: {
},
data () {
return {
user: {
emailLogin: "",
passwordLogin: "",
roleLogin: 0
},
emailLogin: "",
passwordLogin: "",
roleLogin: 0,
emailInput: "",
passwordInput: "",
checkForgot: false
};
},
methods: {
loginConnection () {
const emailDemo = "email"
const passwordDemo = "password"
if ((emailDemo === this.emailInput) && (passwordDemo === this.passwordInput)) {
this.roleLogin = 1
this.emailLogin = this.emailInput
this.passwordLogin = this.passwordInput
router.push("mydata", this.emailLogin)
} else {
if((this.emailInput === "") || (this.passwordInput === "")){
const headerMsg = "Error de autenticación"
const subHeaderMsg = "Datos incompletos"
const msg = "El usuario o la contraseña están vacías. Complete dichos campos y vuelva a intentarlo."
const buttonMsg = "Aceptar"
this.alertLogin(headerMsg, subHeaderMsg, msg, buttonMsg)
} else {
const headerMsg = "Error de autenticación"
const subHeaderMsg = "Datos incorrectos"
const msg = "El usuario o la contraseña no son correctas. Por favor vuelva a intentarlo de nuevo o cambie la contraseña."
const buttonMsg = "Aceptar"
this.alertLogin(headerMsg, subHeaderMsg, msg, buttonMsg)
}
}
},
queryFunctionLogin () {
},
// Alerta Generica
async alertLogin (headerMsg, subHeaderMsg, msg, buttonMsg) {
const alert = await alertController.create({
header: headerMsg,
subHeader: subHeaderMsg,
message: msg,
buttons: [buttonMsg],
});
return alert.present();
}
}
});
</script>
<style scoped>
#container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.ion-content {
--background: #fff url("../../public/assets/images/bg-login.jpg") no-repeat center center / cover;
}
</style>
MyData.vue
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<img src="../../public/assets/images/logo-vertical.svg" class="centerLogo" />
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<div id="container">
<ion-label>My Personal Data</ion-label>
</div>
</ion-content>
</ion-page>
</template>
<script>
import { IonContent, IonHeader, IonPage, IonLabel, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'MyData',
components: {
IonContent,
IonHeader,
IonPage,
IonLabel,
IonToolbar
},
props: {
user: {
type: Object
},
emailLogin: {
type: String
},
passwordLogin: {
type: String
},
roleLogin: {
type: Number
}
},
data () {
return {
emailProp: this.emailLogin,
passwordProp: this.passwordLogin,
roleProp: this.roleLogin
};
},
created() {
console.log(this.emailProp + " - " + this.passwordProp + " - " + this.roleProp)
},
methods: {
}
});
</script>
<style scoped>
#container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.ion-content {
--background: #fff url("../../public/assets/images/bg-login.jpg") no-repeat center center / cover;
}
</style>