Vuejs ajax call not mapping changes to underlying html table

Question

I am making simple ajax call with vuejs and axios:

var app1 = new Vue({
  el: '#app1',
  data: {
    test: []
  },
  methods: {    
    setAJAX: function () {
      axios.get('/Departments/GetDepartments/').then(response => this.test = response.data.listBACAET);
    }
  }
});

Why is this working:

setAJAX: function () {
      axios.get('/Departments/GetDepartments/').then(response => this.test = response.data.listBACAET);
    }

But this is not working, changes are not mapped into table (this.test is undefined):

setAJAX: function () {
      axios.get('/Departments/GetDepartments/').then(function(response){this.test = response.data.listBACAET});
    }

how is setAJAX being called?

Macintosh_89
– Macintosh_89

2019-11-25 10:04:35 +00:00
Commented Nov 25, 2019 at 10:04 — Macintosh_89
– Macintosh_89, Commented Nov 25, 2019 at 10:04

wwerner · Accepted Answer · 2019-11-25 10:07:09Z

4

This is because of the way arrow functions work: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this

When using an arrow function, this is implicitly bound to this of the enclosing scope, which is, in your case, the vue instance on which the method is called. So you're setting the data of your view model, which works.

When using a std. function, there is no this in the scope, hence the error. To use a std. function, you need to define a closure for your view model like this:

setAJAX: function () {
  let vm = this
  axios.get('...').then( function(response) {
    vm.test = response.data.listBACAET
  });
}

answered Nov 25, 2019 at 10:07

wwerner

4,3271 gold badge24 silver badges39 bronze badges

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

1 Comment

FrenkyB Over a year ago

There is only one thing I don't understand - axios is function (typeof axios == 'function'). How can this call be made: axios.get('...') ? It seems like function inside function.

Collectives™ on Stack Overflow

Vuejs ajax call not mapping changes to underlying html table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related