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

Question

VueJs新手.我想知道如何/在哪里进行Ajax调用以动态提取数据以填充以下Vue表？

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

我(大致)修改了上面的例子如下:

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();
  }
})

我正在尝试从这里加入ajax片段:

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

我添加了fetchUser方法,它调用ajax来拉取数据.我可以使用fetch和axiom下拉我的数据并将其打印到控制台,所以我知道该部分有效.

但是,我的数据永远不会出现或更新.该表加载空白.我认为这与我在Vue模型对象(demo)上放置方法和创建钩子有关,而不是在组件本身上.但我不太确定如何修改示例来解决它,因为该示例从父级传递数据.

有人可以给我一些指导吗？

Answer 1

你问题就在这里:

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

在你当时的匿名函数中,你没有你期望的上下文.最简单的解决方案是在方法中添加.bind(this).

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

通过添加它,您的方法体将了解外部上下文,您可以访问组件数据.