VueJs 链接对象中的元素
VueJs linking elements in object
我有一个对象“info_login”,我从中获取帐户信息:
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);
}
},
我明白了:
info_login: [
{pseudo: Nifoo, password: koko},
{pseudo: CassyDie, password: azeaze},
]
我的 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>
并且我想在我的控制台中显示一个单词,前提是我在昵称字段中输入的昵称和密码字段中输入的密码都正确。
目前我有这个:
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');
}
}
但问题是,当我将 Nifoo 作为用户名并将 azeaze 作为密码时,控制台 returns 我好吧好吧好吧好吧。
我想link把昵称改成密码。
感谢您的帮助。
您需要为密码添加条件:
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>
我有一个对象“info_login”,我从中获取帐户信息:
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);
}
},
我明白了:
info_login: [
{pseudo: Nifoo, password: koko},
{pseudo: CassyDie, password: azeaze},
]
我的 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>
并且我想在我的控制台中显示一个单词,前提是我在昵称字段中输入的昵称和密码字段中输入的密码都正确。
目前我有这个:
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');
}
}
但问题是,当我将 Nifoo 作为用户名并将 azeaze 作为密码时,控制台 returns 我好吧好吧好吧好吧。
我想link把昵称改成密码。 感谢您的帮助。
您需要为密码添加条件:
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>