Cannot access "this" in Axios POST method in VUEJS 2

Question

I don't understand why I can't access my datas in the callback response of the POST method of Axios.

I'm trying here to print a error message on error server response but it says into the catch error function that "this" is not defined
here is my code :

<template>
<div class="row">
  <div class="form-group">
    <label for="exampleInputEmail1">Login</label>
    <input type="text" v-model="loginForm" class="form-control" id="exampleInputEmail1" placeholder="login">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" v-model="passwordForm" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button  @click="submitForm();" class="btn btn-default">Submit</button>
  <div class="row" v-if="errorBool" style="color:red;"></div>
</div>
</template>



<script>
  import store from '../../store/store.js'
  import Vuex from 'vuex'
  import axios from 'axios'
  export default {
    store: store,
    name: 'Login',
    data () {
      return {
        msg: 'Welcome to Login page',
        passwordForm: 'admin',
        loginForm: 'admin',
        errorBool: false,
        errorMessage : ''
      }
    },
    computed: {
    ...Vuex.mapGetters([
        'authentification'
    ]),
    },
    methods: {
      ...Vuex.mapActions([
      'loadToken',
      'isAuth',
      'isNotAuth'
      ]),
      submitForm : function() {

        axios.post('http://127.0.0.1:5000/login', {
            name: this.loginForm,
            password: this.passwordForm
          })
           .then((response) => {
            this.loadToken({token: response.data.token})
            this.isAuth()
            this.$router.push('/dashboard')
            this.errorBool = false
          })
          .catch(function (error) {
            console.log(this) // undefinided
            this.errorBool = true
            this.errorMessage = error
            this.isNotAuth()
          })
          }
    },
  }
</script>

trincot trincot · Accepted Answer · 2017-06-23T07:41:10

Just like you did for the then callback, you should use an arrow function for the catch callback, otherwise you lose the desired this binding.

The Promises/A+ specs, point 2.2.5 specifies concerning the two then callback arguments:

onFulfilled and onRejected must be called as functions (i.e. with no this value).^3.2

^{^3.2}^{That is, in strict mode this will be undefined inside of them; in sloppy mode, it will be the global object.}

This equally applies to catch, which is just an alternative way for using the second argument of then.

So write:

.catch( error => {
    console.log(this) // <-- problem solved.
    this.errorBool = true
    this.errorMessage = error
    this.isNotAuth()
})

Cannot access "this" in Axios POST method in VUEJS 2

1 Answers