I have an object "info_login" where I get informations of account :
async created() {
try {
const res = await axios.get(inscriptionURL);
this.comptes = res.data;
this.comptes.forEach(element => {
const data = {'pseudo': element.pseudo, 'password': element.password};
this.info_login.push(data)
});
} catch (e) {
console.error(e);
}
},
And I get this :
info_login: [
{pseudo: Nifoo, password: koko},
{pseudo: CassyDie, password: azeaze},
]
My HTML :
<div class="champs">
<label for="pseudo">Pseudo</label>
<input v-model="pseudo" placeholder="Pseudo" />
</div>
<div class="champs">
<label for="password">Mot de passe</label>
<input type="password" v-model="password" placeholder="Mot de passe" />
</div>
And I want to display a word in my console only if the nickname I entered in the nickname field and the password entered in the password field are good.
For the moment I have this :
checkPseudo(info) {
return info.pseudo === this.pseudo;
},
checkPassword(info) {
return info.password === this.password;
},
login() {
console.log(this.info_login.find(element => element.pseudo === this.pseudo))
if (this.info_login.find(this.checkPseudo) && this.info_login.find(this.checkPassword)) {
console.log('OK OK OK OK OK');
} else {
console.log('NOOOOOOOON');
}
}
But the problem is that when I write Nifoo as a username and azeaze as a password, the console returns me OK OK OK OK OK.
I want to link the nickname to the password. Thanks for your help.
You need to add condition for password too:
new Vue({
el: "#demo",
data() {
return {
pseudo: '',
password: '',
info_login: [
{pseudo: 'Nifoo', password: 'koko'},
{pseudo: 'CassyDie', password: 'azeaze'},
]
}
},
methods: {
checkPseudo(info) {
return info.pseudo === this.pseudo;
},
checkPassword(info) {
return info.password === this.password;
},
login() {
if (this.info_login.find(element => element.pseudo === this.pseudo && element.password === this.password)) {
console.log('OK');
} else {
console.log('NOOOOOOOON');
}
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="champs">
<label for="pseudo">Pseudo</label>
<input v-model="pseudo" placeholder="Pseudo" />
</div>
<div class="champs">
<label for="password">Mot de passe</label>
<input type="password" v-model="password" placeholder="Mot de passe" />
</div>
<button @click="login">login</button>
</div>