Accessing variable from outsite of axios post

Question

I'm trying to access a variable inside of axios call, but it returns an undefined error. Please see my code below.

new Vue({
   el: '#app',
   data(){
     return {
       roles: [{ display: 'disp' }]
     }
   },
   methods: {
      axios.post('{{ route('role.add') }}', {

      })
      .then((response, roles) => {
            console.log(this.roles);

      })
       .catch(function(err){
          console.log(err);
       });
   }

})

Error

Undefined

Solution [SOLVED]

• Added global variable above the Vue.

Answer 1

Try to access without this . I don't see any purpose for using this .

const axios = require("axios");
var a = "some value";

axios.get('http://www.google.com').then(function () {

    console.log(a);
}).catch(e => {
    console.log(e, "ERROR");
})

Answer 2

Just remove this keyword and it will work:

var roles = [{ display: 'disp' }];

axios.post('{{ route('role.add') }}', {

})
.then(function(response){
     console.log(roles);
})
.catch(function(err){
     console.log(err);
});

Or use arrow function which is not preferred:

var roles = [{ display: 'disp' }];

axios.post('{{ route('role.add') }}', {

})
.then((response, roles) => {
     console.log(this.roles);
})
.catch(function(err){
     console.log(err);
});