Vue: login validation not working in my code

Question

I'm creating login validation in Vue.js but the error message is not displaying and it gives me the error:

Property or method "error" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Any help?

Template:

<template>
  <div class="container" width="900">
    <div class="row justify-content-center"  style="margin-top: 10px;">
      <div class="col-5">
        <div v-if="error" class="alert alert-danger" role="alert">
          {{error}}
        </div>
        <div class="card" >
          <div class="card-text">
            <div class="form-group" @keyup.enter="logItIn">
              <input class="form-control"
              v-model="login.email"
              label="Email"
              placeholder="Email Address"
              required
              >   <br>
              <input class="form-control"
              v-model="login.password"
              label="Password"
              type="password"
              placeholder="Password"
              required>
            </div>
          </div>
          <button type="button" class="btn btn-secondary"  @click='logItIn'>Login</button>
        </div>
      </div>
    </div>
  </div>
</template>

Script:

import axios from 'axios'
export default {
  data() {
    return {
      login: {
        email:"",
        password:"",
        error: ""
      }
    }
  },
  methods: {
    async logItIn() {
      try {
        axios.post('https://odevin-api.herokuapp.com/login',this.login)
          .then(response => {
            console.log(response)
            let newToken=response.data.response.token;
            window.token=newToken;
            let user=response.data.response.user;   //response
            localStorage.setItem('token',newToken);
            localStorage.setItem('user',JSON.stringify(user));
            window.axios.defaults.params={api_token:newToken}
            // Event.$emit('login',user);
            this.$router.push('/');
          });
      } catch(e) {
        this.error = 'invalid user name or password';
      }
    }
  }
}

You're using it as error but you defined it as login.error. Maybe you meant to move it outside of the login object in data. — Dan
– Dan, Commented Dec 18, 2020 at 18:08

hamid niakan · Accepted Answer · 2020-12-18 18:09:39Z

2

you referenced {{ error }} in your template but in your data object, error is a property of login object. so vue can't find it properly.

either change the usage in your template to {{ login.error }} or define it in your data object like this:

data() {
  return {
    error: '',
    login: {
      email: '',
      password: '',
    },
  }
}

answered Dec 18, 2020 at 18:09

hamid niakan

2,8891 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sara97 Over a year ago

i treid this but now it doesn't show the error message i set "invalid user name or password"

hamid niakan Over a year ago

So you are passed the error in your question, now you have to check if the error is updated correctly or not! did you change the template binding or the data object?

sara97 Over a year ago

the data object

hamid niakan Over a year ago

I think there might be some issue with logItIn function, you used async keyword but I can't see any await keyword in it! I doubt this is the right syntax, maybe catch block doesn't get to run at all. read this link maybe it helps (only the first part that describes a login function in vue using async ... await syntax), also you can put a console.log in the catch block to see if it runs or not: stackoverflow.com/questions/65343792/vue-login-function/…

Collectives™ on Stack Overflow

Vue: login validation not working in my code

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related