Connecting elements within an object using VueJs

Within my object "info_login," I gather account information:

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);
    }
  },

The information in "info_login" is as follows:

info_login: [
  {pseudo: Nifoo, password: koko},
  {pseudo: CassyDie, password: azeaze},
]

In my HTML structure:

<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>

I aim to log a message in the console only if the entered username and password match.

Currently, my methods look like 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');
  }
}

A issue arises when entering 'Nifoo' as the username and 'azeaze' as the password, resulting in the console showing 'OK OK OK OK OK.'

I seek a solution to ensure that the username corresponds to the correct password. Thank you for your assistance.

Answer №1

To enhance security, don't forget to include a condition for the password as well:

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Errors persist with Angular 2 iFrame despite attempts at sanitization

Attempting to add an iFrame within my Angular 2 application has been challenging due to the error message that keeps popping up. unsafe value used in a resource URL context The goal is to create a dynamic URL to be passed as a parameter into the iFrame ...

Error 500: An invalid data type was encountered in an express.js node.js environment

Currently, I am in the process of developing an Authentication page using a combination of node.js, express.js, and mysql2. The user ID and password entered on the webpage are then passed through app.post('/login',...). However, upon submitting t ...

What is the best way to handle mixed parameter types in Spring MVC when sending data from AngularJS?

I am struggling to pass a json object and a string as parameters to my Java controller. Despite my efforts, I keep receiving url = "" in the controller. What could be causing this issue? Is there a solution to successfully passing these parameters? $ ...

Top method for displaying and concealing GUI elements upon a click event

I would like a dat.GUI() instance to appear when a mesh is clicked, and disappear when it is clicked again. Furthermore, if it is clicked once more, I want it to reappear. Despite trying various approaches, I have been unable to achieve the desired behavio ...

The dropdown feature on my theme seems to be malfunctioning on Wordpress

I'm having trouble figuring out what I'm doing wrong. The dropdown navigation works fine with the default Wordpress twentyeleven theme, but when I switch to my custom theme, the dropdown stops appearing. Here is the code I'm using: <div ...

Package videojs along with the videojs-ima extension

For a few days now, I have been struggling to create a single JavaScript file that contains all the necessary components to play videos with Google IMA ads. However, I keep encountering errors, particularly player.ads is not function, which seem to be rela ...

Trigger the fire controller code upon the change of the textbox date in ASP.NET MVC

I am looking for a way to trigger controller code when a user clicks out of a date textbox without using HTML helpers, only plain HTML. I am new to MVC and have previously worked with web forms. The controller code that needs to be executed is as follows: ...

When working with JavaScript, the `textarea` value property will not recognize line breaks or white spaces when being read

Recently, I've been developing a browser-based notebook app. However, I encountered an issue where if I type a note like this: *hello this is my first note The app displays it as: hello this is my first note Additionally, I want elements with the ...

Unleashing the potential of extracting the value of a subsequent iteration while within the

Currently, I am facing a dilemma as I am unable to comprehend the logic required to design this algorithm. The problem at hand involves a sequence of images with arrows placed alternatively between each image. The structure appears as follows: Image -> ...

What methods can I use to accomplish the transformation of superimposed images?

Struggling with transforming a content box on my webpage. I have a div containing three overlapping images positioned using Grid, and I want to scale one of them to fill the entire div when scrolled over. While I managed to achieve this effect, I'm un ...

Enhance Your NextJs Website with Interactive Tooltips using @tippyjs/react

<Link href="/company/add" > <a title="My New Title" data-toggle='tooltip' className="btn btn-primary">My Link</a> </Link> Trying to integrate a Tippy tooltip component with a Nextjs Link do ...

Securing RESTful APIs with stringent security measures

Lately, I've been delving into using modern front end technologies such as React and Angular. This has led me to explore tools like JSON Server for simulating restful database interactions. I've noticed that most REST APIs require authentication ...

How to disable a specific array of dates in Ant Design range picker

Is there a way to block dates prior to the current date and specify certain dates that should also be disabled on the calendar? For example, I need to prevent selection of: Today: 2018-07-30 Dates to disable: [2018-08-10, 2018-08-12, 2018-08-20] When t ...

Moving the Promise.all feature from AngularJs to VueJs

I'm currently facing a challenge with moving a function from AngularJs to VueJs. I would really appreciate any help or suggestions you may have! items = { one: {...details here...}, two: {}, } In AngularJs: var promises = []; var deferred = $ ...

CSS- Strategically placing and centering images above specific keywords in (any) HTML content without disrupting the flow of text

My main objective involves dynamically inserting images above text on any given page using a content script. The challenge lies in maintaining the proper alignment of the text after adding the images. To achieve this, I surround the words where the image i ...

A guide on adding a personal library to Ember using npm

Despite the abundance of blog posts discussing it, I am still facing challenges in utilizing a custom library as a dependency for my ember application through npm. I have developed a WebGL library and successfully imported it into my Ember app by installi ...

Translating coordinates into their corresponding location on the chart

I'm currently working with a dataset containing information about an area in Western Europe. I am trying to convert coordinates into values within this table, facing a challenge similar to the one described in this query. However, I lack experience in ...

"Unraveling the depths of a multidimensional array in JavaScript: a comprehensive guide

Seeking assistance from this wonderfully helpful community :) It seems like I might be declaring and creating my arrays incorrectly, as I am trying to add content to an array of arrays but unable to retrieve anything from it. Here's the code snippet ...

What is the best way to ensure that two objects collide with one another?

Issue Description I am currently working on implementing collision detection for two objects. The goal is to determine if the objects are intersecting by calculating their bounding boxes with Box3 and using the .intersectsBox() function to obtain a boolea ...

The issue with JQGrid: Inaccurate selection of drop down value when edit type is set to 'select'

I am currently using JQGrid 4.4.4 and have encountered an issue with a column set to edittype = 'select'. While the value displayed in the grid row is correct, the drop-down or combo-box value is being set to the wrong value when editing the row. ...