TypeError: Cannot read properties of undefined (reading 'input'), Vue

Question

I'm trying to access a using my API, which works when I try using Postman, from VUE, but for some reason I'm getting the error "TypeError: Cannot read properties of undefined (reading 'input')".

The body when sending the post would be something like this:

POST: http://localhost:8080/api/vendedor/login

{
  "correo": "l.andrade01@ufromail.cl",
  "password": "123456"
}

And the answer from the POST would be a JSON with:

{
  "idvendedor": 5,
  "nombre": "Leonardo",
  "apellido": "Andrade",
  "correo": "l.andrade01@ufromail.cl",
  "password": "123456",
  "lugartrabajo": "Casino Los Notros"
}

The HTML from the login would be like this:

<form class="w-96 mx-auto rounded-md">
            <div class="input">
                <label for="email" class="text-xl font-medium text- flex justify-left py-1">Correo</label>
                <input type="text" name="email" v-model="input.email" placeholder="emailejemplo@ufromail.cl" class="border-2 p-1 w-96 border-violet-700 rounded-full">
            </div>
            <div class="input">
                <label for="password" class="text-xl font-medium text- flex justify-left py-1">Contraseña</label>
                <input type="password" name="password" v-model="input.password" placeholder="***************************" class="border-2 p-1 w-96 border-violet-700 rounded-full">
            </div>
            <div class="pb-5"></div>
            <button type="submit" id="botonlogin" v-on:click.prevent="login()" class="ml-28 h-8 w-36 mx-auto bg-gradient-to-r from-indigo-500 to-indigo-700 rounded-full hover:from-indigo-400 hover:to-indigo-600">
                <span class="text-center text-white font-medium">Iniciar Sesión</span>
            </button>
        </form>

And this is the script in the login:

<script>
import axios from 'axios';

  export default {
    name: 'Login',
    data() {
      return {
        input: {
          email: "",
          password: ""
        },
        vendedor: {
          idvendedor: "",
          nombre: "",
          apellido: "",
          correo: "",
          password: "",
          lugartrabajo: ""
        },
      }
    },
    methods: {
      async login() {
        try{
          let res = await axios.post('http://localhost:8080/api/vendedor/login', this.data.input);
          console.log(res);
          if(this.input.email == this.vendedor.correo && this.input.password == this.vendedor.password){
            this.$router.push('/vendedor/homeVender');
          }
        }catch (e){
          console.log(e)
        }
        
          
      }
    }
  }
</script>

I expected to get the JSON from axios, so that i could make an "if" for the login, but I'm getting the error "TypeError: Cannot read properties of undefined (reading 'input')"

Answer 1

The error you are seeing is because you are trying to access the input property of the data object in your login method, but there is no data property in your Vue component. To fix the error, simply replace this.data.input with this.input in your login method:

*methods: {
  async login() {
    try {
      let res = await axios.post('http://localhost:8080/api/vendedor/login', this.input);
      console.log(res);
      if (this.input.email == this.vendedor.correo && this.input.password == this.vendedor.password) {
        this.$router.push('/vendedor/homeVender');
      }
    } catch (e) {
      console.log(e);
    }
  }
}*