0

I've got an app using DJRF for the backend and Vue for the front end. I'm also using Djoser for authentication, which is the endpoint I'm trying to reach out to. I've got Vue reaching out to an API for the data and I'm using Postman to test, which works out perfectly fine. However, I'm trying to make a POST request with Axios on the frontend and I keep getting this error

Uncaught (in promise) TypeError: Cannot read property 'error' of undefined

logIn: () => {
  axios
    .post("http://127.0.0.1:8000/auth/token/login/", {
      email: "test2@test.com",
      password: "password"
    })
    .then(response => {
      this.authtoken = response.authtoken;
    })
    .catch(error => {
      this.error = error;
    });
}

I make this request with Postman and don't have issues so I figure it's not a problem with anything on the backend. I've also tried just using the url extension without the IP address and also using 'localhost'.

Lastly, looking at my terminal, when I make the request it returns a status code of 200. Something with how I'm setting up this POST request with Axios?

Luis Rodriguez
  • 257
  • 3
  • 15
  • What is `logIn` a part of? Ie, is it a component method? What do you expect `this` to refer to? – Phil Dec 01 '19 at 23:21

1 Answers1

-1

I suppose that in this you have no vue instance, but axios.

Define before axios let vue = this;, somethink like this:

logIn: () => {
  let vue = this;

  axios
    .post("http://127.0.0.1:8000/auth/token/login/", {
      email: "test2@test.com",
      password: "password"
    })
    .then(response => {
      vue.authtoken = response.authtoken;
    })
    .catch(error => {
      vue.error = error;
    });
}
Naskalin
  • 895
  • 9
  • 9
  • This won't make any difference at all. – Phil Dec 01 '19 at 23:39
  • You are wrong, this happens to be lost, such as in cycles. What does the error log "Cannot read property 'error'" just look like this is simply undefined – Naskalin Dec 03 '19 at 16:59
  • I am not wrong. Given the use of arrow functions throughout, `this` will always be the same. Setting the `vue` variable where you have won't make any difference – Phil Dec 03 '19 at 20:25