使用来自父级的Ajax调用更新vuejs组件

Question

New to VueJs. I'm wondering how/where would I make an Ajax call to pull data dynamically down to populate the following Vue table?

https://jsfiddle.net/yyx990803/xkkbfL3L/?utm_source=website&utm_medium=embed&utm_campaign=xkkbfL3L

I've (roughly) modified the example above as follows:

var demo = new Vue({
  el: '#demo',
  data: {
    searchQuery: '',
    gridColumns: ['name', 'power'],
    gridData: []
  },
  methods: {
    fetchUsers: function() {
      ...
      // ajax call using axiom, fetches data into gridData like this:
      axios.get('http://localhost/url')
        .then(function(response) {
           this.gridData = response.data;
        })
        .catch(function(error) { console.log("error"); })
      ...
    }
  },
  created: function() {
    this.fetchUsers();
  }
})

I'm trying to incorporate the ajax pieces from here:

https://jsfiddle.net/chrisvfritz/aomd3y9n/

I've added the fetchUser method which makes the ajax call to pull the data down. I'm able to pull down my data and print it to the console using both fetch and axiom, so I know that part works.

However, my data never appears or updates. The table loads blank. I think it has something to do with me putting the method and created hook on the Vue model object (demo), rather than on the component itself. But I'm not quite sure how to modify the example to resolve it, as the example passes the data in from the parent.

Can someone give me some guidance?

Answer 1

You problem is right over here:

.then(function(response) {
     this.gridData = response.data;
})

Within your anonymous function within your then you don't have the context you expect. The most simple solution is adding a .bind(this) to the method.

.then(function(response) {
    this.gridData = response.data;
}.bind(this))

By adding it your method body will be aware of the outer context and you can access your components data.