VueJs链接对象中的元素

Question

我有一个对象“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 作为密码时，控制台返回我 OK OK OK OK OK。

我想将昵称链接到密码。 感谢您的帮助。

Answer 1

您还需要为密码添加条件：

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>