CODEWITHSUNDEEP
ajaxvue.jsvuejs2vue-component
blindsnowmobile
blindsnowmobile

Reputation: 4298

Updating vuejs component with ajax call from the parent

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?

Upvotes: 2

Views: 2677

Answers (1)

Frnak
Frnak

Reputation: 6802

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.

Upvotes: 6

Related Questions