[Vuejs]-Vuejs: Show error messages as popups

by

2👍

✅

It’s not clear from the description what’s not working, so I’ll just point out some issues I see.

One thing to mention is, there is no evidence of you using vuex, no getters, no setters, no state.

Most notable is that you have the messages defined as an array of objects, which makes it difficult to look up

instead of this, which is harder to look up:

errorMessages: [
  {
    messageOne: "The email that has been entered is incorrect. Please try again!"
  },
  // etc... {}, {}, {}
]

… you should do

errorMessages: {
  messageOne: "The email that has been entered is incorrect. Please try again!",
  messageTwo: "Email/Password is missing. Please try again!",
  messageThree: "The password that has been entered is incorrect. Please try again!",
  messageFour: "Both Email and Password that have been entered are incorrect!",
}

so that you can find a message using this.errorMessages.messageTwo

Or better yet, define it outside of your vue component, since you’re not using them in your template

const MESSAGE_INCORRECTEMAIL = "The email that has been entered is incorrect. Please try again!";
const MESSAGE_MISSINGFIELD = "Email/Password is missing. Please try again!";
const MESSAGE_INCORRECTPASSWORD = "The password that has been entered is incorrect. Please try again!";
const MESSAGE_INCORRECTEMAILPASSWORD = "Both Email and Password that have been entered are incorrect!";

and then just call them as MESSAGE_MISSINGFIELD from your script

From security standpoint, it’s a bad idea to indicate whether the username or the password is wrong, as it makes hacking easier by confirming what usernames exist.

You can determine if the user had errors or fields are missing before sending the form for remote processing.

to do that, you would call 

login: function (index) {
  if (this.email.trim() === '' || vueObject.password.trim() === ''){
    this.errorM.push(MESSAGE_MISSINGFIELD);
    return // <- prevents further execution
  }
  // repeat for other local validations before remote request
  // ... then process request
  axios.post(`https://api.ticket.co/auth/login`, {

anyway, you might also need t break your question up into individual errors you encounter.

👤Daniel

Leave a comment