VueJs linking elements in object

Question

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.

Answer 1

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>